From 5cac965d0da5426981f50b48cce3ef8add6d3022 Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Thu, 28 May 2026 02:10:26 +0100
Subject: [PATCH] =?UTF-8?q?ux(config):=20dep-required=20cards=20lay=20out?=
 =?UTF-8?q?=20as=20two=20rows=20=E2=80=94=20content=20above,=20button=20be?=
 =?UTF-8?q?low?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The "<X> needs to be installed" feature cards (Enable Whitelist, Authelia
Integration, Headscale Integration, …) were rendering with broken
proportions inside narrow form-grid columns: the body squashed into a
~30-char column and the install button stretched vertically as the only
flex item with room to grow.

Switch to a 2-row CSS grid:

  ┌────────┬──────────────────────────┐
  │ icon   │ title                    │   row 1: who is this for
  │        │ reason                   │
  ├────────┴──────────────────────────┤
  │       [ Install <Service> ]        │   row 2: full-width fix-it
  └───────────────────────────────────┘

  icon  grid-row 1, col 1
  body  grid-row 1, col 2
  action grid-row 2, col 1 / -1, width 100%

Reads top-to-bottom regardless of how narrow the host column is, so the
Features tab's 3-column grid stops looking broken. The old @media
(max-width: 560px) responsive override is gone — the grid layout works
at every width, no breakpoint needed.

Signed-off-by: librelad <librelad@digitalangels.vip>
---
 containers/libreportal/frontend/css/style.css | 41 +++++++++++--------
 1 file changed, 24 insertions(+), 17 deletions(-)

diff --git a/containers/libreportal/frontend/css/style.css b/containers/libreportal/frontend/css/style.css
index b83af7f..cf183c7 100755
--- a/containers/libreportal/frontend/css/style.css
+++ b/containers/libreportal/frontend/css/style.css
@@ -727,31 +727,44 @@ html[data-theme="nebula"]::after {
   to   { opacity: 1; transform: translateY(0); }
 }
 
+/* "Dependency required" card — e.g. "Enable Whitelist — Traefik needs
+   to be installed" on the Features tab. Two-row grid so the action
+   button always lives in its own full-width footer row, regardless of
+   how narrow the card column is. The old single-row flex layout broke
+   in 3-column grids: the body squashed into a 30-char column and the
+   button stretched vertically as the only flex item with breathing
+   room. Grid keeps icon + body on one row and the button on the next,
+   so the visual reads top-to-bottom: who is this for → what's missing
+   → fix it. */
 .dep-required-card {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  padding: 12px 14px;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto auto;
+  gap: 10px 12px;
+  padding: 14px;
   background: rgba(245, 158, 11, 0.08);
   border: 1px solid rgba(245, 158, 11, 0.30);
   border-radius: 10px;
   margin-bottom: 10px;
 }
 .dep-required-icon {
+  grid-row: 1;
+  grid-column: 1;
   width: 40px;
   height: 40px;
   border-radius: 8px;
   object-fit: contain;
   background: rgba(var(--text-rgb), 0.04);
   padding: 4px;
-  flex-shrink: 0;
 }
 .dep-required-body {
-  flex: 1;
+  grid-row: 1;
+  grid-column: 2;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 2px;
+  align-self: center;
 }
 .dep-required-title {
   font-size: 14px;
@@ -764,20 +777,14 @@ html[data-theme="nebula"]::after {
   line-height: 1.4;
 }
 .dep-required-action {
-  flex-shrink: 0;
+  grid-row: 2;
+  grid-column: 1 / -1;
+  width: 100%;
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: 6px;
-  white-space: nowrap;
-}
-@media (max-width: 560px) {
-  .dep-required-card {
-    flex-direction: column;
-    align-items: stretch;
-    text-align: center;
-  }
-  .dep-required-icon { align-self: center; }
-  .dep-required-action { justify-content: center; }
+  margin-top: 2px;
 }
 
 .nav-button {