Skip to content

Commit 8054d3c

Browse files
fix(ui): no horizontal scroll on results table — only the log panel scrolls
The results table-wrap set only overflow-y:auto. Per the CSS overflow spec, when one axis is non-visible the other computes from `visible` to `auto`, so the table scrolled sideways whenever its columns slightly overflowed. Pin overflow-x:hidden on .table-wrap (live + admin) and .results-head-wrap (admin) so the table fits its column and cells ellipsis-truncate. The live log panel (.logs) keeps overflow-x:auto — horizontal scroll stays scoped to the log section on both the public live page and admin, as intended.
1 parent 28d917d commit 8054d3c

2 files changed

Lines changed: 11 additions & 3 deletions

File tree

admin.html

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -586,11 +586,15 @@
586586
.log-filter-btn:hover { color: var(--text); }
587587
.log-filter-btn.active { background: var(--bg-input); color: var(--text); }
588588

589-
.table-wrap { overflow-y: auto; scrollbar-gutter: stable; flex: 1; min-height: 0; padding: 0 8px 8px 8px; }
589+
/* overflow-x pinned to hidden: setting only overflow-y makes the spec
590+
compute overflow-x to `auto`, which let the results table scroll
591+
sideways. The table fits its column (cells ellipsis-truncate); only the
592+
log panel scrolls horizontally. */
593+
.table-wrap { overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; flex: 1; min-height: 0; padding: 0 8px 8px 8px; }
590594
/* Fixed header table (outside the scroll area). scrollbar-gutter:stable on
591595
both wraps reserves an equal right-side gutter so the header columns line
592596
up with the scrolling body even when its scrollbar appears. */
593-
.results-head-wrap { overflow-y: auto; scrollbar-gutter: stable; flex-shrink: 0; padding: 0 8px; margin-top: 8px; }
597+
.results-head-wrap { overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; flex-shrink: 0; padding: 0 8px; margin-top: 8px; }
594598

595599
table { width: 100%; border-collapse: separate; border-spacing: 0 4px; table-layout: fixed; }
596600

live.html

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -325,7 +325,11 @@
325325
text-transform: uppercase;
326326
}
327327

328-
.table-wrap { overflow-y: auto; flex: 1 1 auto; min-height: 0; padding: 0 8px 8px 8px; margin-top: 8px; }
328+
/* overflow-x pinned to hidden: with only overflow-y set, the spec computes
329+
overflow-x to `auto`, which made the results table scroll sideways. The
330+
table is meant to fit its column (cells ellipsis-truncate); only the log
331+
panel scrolls horizontally. */
332+
.table-wrap { overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; min-height: 0; padding: 0 8px 8px 8px; margin-top: 8px; }
329333

330334
table { width: 100%; border-collapse: separate; border-spacing: 0 4px; table-layout: fixed; }
331335
td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

0 commit comments

Comments
 (0)