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

ux(config): dep-required cards lay out as two rows — content above, button below

Browse Source 
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>
This commit is contained in:
librelad 2026-05-28 02:10:26 +01:00
parent 5432f46fd0
commit 5cac965d0d
1 changed files with 24 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
containers/libreportal/frontend/css/style.css
View File

@ -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 {