fix(webapp): reflow remote backup list by container width (#387)

* fix(webapp): reflow remote backup table by container width, not viewport

The remote backup list is a four-track grid with a 642px hard minimum plus
gaps and padding, but its detail panel is only as wide as the viewport minus
roughly 858px of app and backup sidebars. Single-column reflow was keyed to
viewport media queries only, so between about 1181px and 1600px no breakpoint
fired while the panel was already too narrow: .backup-browser-list's
overflow:hidden silently clipped Download, Restore and Delete, and because the
list was itself the clipping box the outer scroll container could not recover
them. Common laptop widths were all affected.

Query the panel's own width instead, since that is what actually decides
whether the table fits. Also let the action buttons wrap rather than overflow
their 220px track, and keep a horizontal scroll fallback on the list so a
future overflow degrades to a scrollbar instead of losing content.

The reflow rules were duplicated across two media queries in responsive.css;
they now live only in the container query.

* fix(webapp): keep the vault grid inside the page on narrow viewports

The vault grid required 270px + 400px + 400px, so it needed a 1362px viewport
before the viewport-based fallback at 1180px took over, leaving a horizontal
page scrollbar across those widths.

The list and detail panes already scroll internally, which zeroes their
automatic minimum size, so dropping the track minimums to 0 lets the grid fit
the content area at any width. Wide viewports are unaffected because 36%/1fr
were never binding there.
This commit is contained in:
EggRoll authored and GitHub committed 2026-09-25 23:17:24 +08:00
1 parent 99d404f7cb
commit 589557a757
3 files changed
+60 -44

No files matched your search

+1 -39
View File
@@ -41,29 +41,10 @@
justify-self: start;
}
.import-export-panels,
.backup-browser-row {
.import-export-panels {
grid-template-columns: 1fr;
}
.backup-browser-head {
display: none;
}
.backup-browser-meta {
text-align: left;
}
.backup-browser-actions {
justify-content: flex-start;
flex-wrap: wrap;
}
.backup-browser-nav {
align-items: flex-start;
flex-direction: column;
}
.settings-twofactor-grid {
grid-template-columns: 1fr;
}
@@ -1248,29 +1229,10 @@
gap: 7px;
}
.backup-browser-row,
.field-grid {
grid-template-columns: 1fr;
}
.backup-browser-head {
display: none;
}
.backup-browser-meta {
text-align: left;
}
.backup-browser-actions {
justify-content: flex-start;
flex-wrap: wrap;
}
.backup-browser-nav {
align-items: flex-start;
flex-direction: column;
}
.backup-grid {
gap: 8px;
padding: 0;