From fed3a123a63a09d3e6db0496468064c3ee61c419 Mon Sep 17 00:00:00 2001 From: librelad Date: Thu, 28 May 2026 00:17:02 +0100 Subject: [PATCH] fix(apps): left-align shrunk apps-section and account for border-box so 2 cards stay on one row MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- containers/libreportal/frontend/css/apps.css | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/containers/libreportal/frontend/css/apps.css b/containers/libreportal/frontend/css/apps.css index 4899b8f..17d30c5 100644 --- a/containers/libreportal/frontend/css/apps.css +++ b/containers/libreportal/frontend/css/apps.css @@ -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) ); }