Skip to content

fix(gui): cap the log table against the dynamic viewport #2904

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
lidge-jun wants to merge 1 commit into from
Closed

fix(gui): cap the log table against the dynamic viewport #2904

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 16 additions & 1 deletion gui/src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -763,6 +763,16 @@ a.btn, a.btn:hover { text-decoration: none; }
}
/* Refresh icon spins while a sync is in flight (the `.spin` keyframes already exist). */
.spin-icon { animation: spin 0.9s linear infinite; }
/* The width cap needs two classes to beat `.notice { max-width: var(--prose-measure) }`,
which every toast also carries and which is declared LATER in this file. At equal
specificity source order won, so the toast resolved to 70ch (542px) rather than its
design width — visible as a toast wider than intended at desktop sizes. */
.action-toast.notice {
/* Both halves of the original cap have to be restated here, not just the design width:
dropping the viewport term let the toast run to the screen edge at narrow widths
(measured left=0 at 430px, losing the 24px inset the right side keeps). */
max-width: min(480px, calc(100vw - 48px));
}
/* Toast dismiss affordance: quiet ghost button inside the notice row. */
.action-toast-dismiss {
flex: none;
Expand Down Expand Up @@ -2000,7 +2010,12 @@ table.logs-table {

.logs-table-wrap {
overflow-y: auto;
max-height: calc(100vh - 260px);
/* `dvh`, not `vh`: static `vh` resolves against the LARGE viewport, so on mobile the
cap is computed for a viewport taller than the one the user can see and the last rows
sit under the browser chrome. The rest of the shell already moved to `100dvh`
(see .app, .sidebar, .main-inner--combos, and the mobile drawer), so this was the
outlier rather than the convention. */
max-height: calc(100dvh - 260px);
}

.logs-table thead {
Expand Down
Loading