Webstar/LibrePortal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(apps): left-align shrunk apps-section and account for border-box so 2 cards stay on one row

Browse Source 
Two follow-ups to the dynamic-width change:

1. The box was centred (margin: 22px auto), which moved cards out of
   their original left position whenever the cap kicked in. Revert to
   margin: 22px so the cards keep their left X — the box just shortens
   on the right when there are few visible cards.

2. The formula assumed content-box, but style.css:4 sets
   * { box-sizing: border-box } globally. With border-box max-width is
   the outer width, so a 2-card cap of 664px gave content = 664 - 44
   (padding) - 2 (border) = 618, just under the 620 needed to keep
   2 columns at minmax(300px, 1fr) with gap 20 — grid silently dropped
   to 1 column and the cards stacked. Formula now adds 46px (padding
   + border) plus 2px of sub-pixel buffer, so 2 cards have 622px of
   content and reliably stay on one row.

Signed-off-by: librelad <librelad@digitalangels.vip>
This commit is contained in:
librelad 2026-05-28 00:17:02 +01:00
parent 2de82f4b2e
commit fed3a123a6
1 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
containers/libreportal/frontend/css/apps.css
View File

@ -8,20 +8,24 @@
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--app-min), 1fr));
gap: var(--app-gap);
margin: 22px auto;
margin: 22px;
padding: 22px;
background: rgba(var(--text-rgb), 0.025);
border: 1px solid var(--border-subtle);
border-radius: 16px;
/* Shrink the glass box to exactly the visible-card count so a row with
two apps doesn't leave a card-shaped hole on the right. --app-count
is set from apps-manager.js (render + search filter); the 100%-44px
cap keeps the same 22px symmetric gap from the layout edges when
there are enough cards to fill the row. Default 99 = no cap until
JS reports a real count. */
is set from apps-manager.js (render + search filter). Box is
left-aligned (margin: 22px, not auto) so cards stay where they were
before the cap was introduced — the box just shortens on the right.
The 100%-44px cap honours the same 22px gutter at full width. The
formula is the outer width under border-box (the global default from
style.css:4): N*min + (N-1)*gap + 44px padding + 2px border + 2px
buffer for sub-pixel rounding so 2 cards reliably stay on one row.
Default 99 = no cap until JS reports a real count. */
max-width: min(
calc(100% - 44px),
calc(var(--app-count, 99) * var(--app-min) + (var(--app-count, 99) - 1) * var(--app-gap) + 44px)
calc(var(--app-count, 99) * var(--app-min) + (var(--app-count, 99) - 1) * var(--app-gap) + 48px)
);
}