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

fix(webui): stop Backups-tab card bg from running past the footer buttons

Browse Source 
On /overview Backups the card surface lived on .main, which wraps both the
body and the flipped footer — so the background overhung past the action
buttons. Move the card surface onto .backup-page-body (rounded bottom,
joined to the tab strip) and let the footer sit transparent below it,
matching the app Config tab's .tabs-content + .config-actions split.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
This commit is contained in:
librelad 2026-06-17 18:45:56 +01:00
parent 9a58869899
commit c02202d620
1 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
containers/libreportal/frontend/components/apps/overview/css/overview.css
View File

@ -283,11 +283,17 @@
.tab-button rule does this for app/Migrate sub-tabs; .category needs its own). */
#overview-view #ov-pane-backups .backup-layout > .sidebar .category:first-child { border-top-left-radius: 12px; }
#overview-view #ov-pane-backups .backup-layout > .sidebar .category:last-child { border-top-right-radius: 12px; }
/* The content area becomes the connected .tabs-content card (visible surface,
rounded bottom) so the strip + body read as one unit, like the app Config tab. */
/* .main is just the layout column now — the visible card surface lives on the
body below (so it stops above the footer buttons), exactly like the app
Config tab where .tabs-content is the card and .config-actions sits outside. */
#overview-view #ov-pane-backups .backup-layout > .main {
width: 100%;
min-width: 0;
background: transparent;
}
/* The body is the connected .tabs-content card: card surface + rounded bottom
corners, joining the tab strip above so the strip + body read as one unit. */
#overview-view #ov-pane-backups .backup-page-body {
background: var(--card-bg);
border-radius: 0 0 12px 12px;
}
@ -303,17 +309,19 @@
#overview-view #ov-pane-backups .backup-page-section > .page-header {
order: 2;
border-bottom: none;
border-top: 1px solid rgba(var(--text-rgb), 0.08);
border-top: none;
background: transparent;
margin-bottom: 0;
padding: 16px 22px;
/* Flush-left under the card, matching .config-actions (left padding 0). */
padding: 16px 22px 8px 0;
}
#overview-view #ov-pane-backups .backup-page-section > .page-header .page-header-icon-slot,
#overview-view #ov-pane-backups .backup-page-section > .page-header .page-header-title {
display: none;
}
#overview-view #ov-pane-backups .backup-page-body { order: 1; }
/* The export dropdown anchors below the actions; with the actions now at the
card's bottom edge it must open upward (and leftward) to stay on the card. */
/* The footer row sits low on the page, so the export dropdown opens upward
(and leftward) to stay on-screen rather than clipping past the viewport. */
#overview-view #ov-pane-backups .backup-page-section > .page-header .backup-export-menu {
top: auto;
bottom: calc(100% + 6px);