From f908a53f273e966e9698074ed6f74aab4ff8e9b0 Mon Sep 17 00:00:00 2001 From: librelad Date: Thu, 28 May 2026 01:24:28 +0100 Subject: [PATCH] fix(apps): bump --app-min from 300 to 328 so typical laptops drop to 2 cols and stop orphaning MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit User's empirical fix: on a 1280-class viewport (sidebar 220, content ~1010), --app-min 300 made the grid pick 3 cols because floor((1010+20)/(300+20)) = 3, which left a 4-card category landing as 3+1 with the orphan-row gap that's been the running visual complaint. Bumping --app-min to 328 changes the floor to floor((1010+20)/(328+20)) = 2, so the same 4-card category becomes 2+2 with no orphan. Wider monitors are unaffected — a 1056px content area still fits 3 tracks of 328 (3*328 + 2*20 = 1024 ≤ 1056), and 1700px+ content still fits 4. The cards-per-row count only drops on the narrow band where 300 would otherwise have squeezed a third just-too-tight column in. Signed-off-by: librelad --- containers/libreportal/frontend/css/apps.css | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/containers/libreportal/frontend/css/apps.css b/containers/libreportal/frontend/css/apps.css index 6c94b50..8210032 100644 --- a/containers/libreportal/frontend/css/apps.css +++ b/containers/libreportal/frontend/css/apps.css @@ -3,7 +3,14 @@ /* App center cards, grid, tags, and detail view. Extracted from style.css. */ .apps-section { - --app-min: 300px; + /* Track min-width is the lever for "how many columns at this viewport". + auto-fill picks floor((content + gap) / (--app-min + gap)) tracks, so + bumping --app-min from 300 to 328 pushes typical 1280px-class laptops + from 3 cols → 2 cols where the third column would have been the + orphan that ran into a half-empty last row. Wider monitors still hit + 3+ cols (e.g. 1056px content fits 3 tracks of 328 with room to + spare), so density on bigger screens is unchanged. */ + --app-min: 328px; --app-gap: 20px; display: grid; /* Fixed-width tracks so cards stay exactly --app-min wide regardless