rouggy/OpsLog
0
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 75 Wiki Activity

fix(webpub): the published page hid columns it had room for

Browse Source 
The page was capped at 1100px — a comfortable reading width, and the right
choice for the eight default columns. Now that all 123 fields can be published,
anything past about eight sat behind a horizontal scrollbar on a screen wide
enough to show the lot.

Worse, Windows hides overlay scrollbars until something moves, so a table that
scrolled looked exactly like a table with its right-hand columns missing. That
is what was reported, and the report was reasonable: nothing on screen said
otherwise.

The wrapper grows with its content now, up to the window, and keeps a minimum so
a two-column table does not collapse on a large display. The table sizes to what
its cells need rather than being squeezed to the container first — that squeeze
could wrap a callsign while empty space sat further along the same row. And the
scrollbar is drawn permanently, thin and in the page's own colours.
This commit is contained in:
rouggy
2026-08-11 19:45:00 +02:00
parent f7b9bfd0bc
commit d3a405f4f6
2 changed files with 21 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/webpub/webpub.go
+17 -3
View File
@@ -401,11 +401,25 @@ func renderHTML(cfg Config, cols []Column, qsos []qso.QSO, stationCall string) [
*{box-sizing:border-box}
body{margin:0;padding:1.5rem 1rem;background:var(--bg);color:var(--fg);
font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.wrap{max-width:1100px;margin:0 auto}
/* The page grows with its table instead of being capped at a comfortable
READING width. 1100px suits eight columns and hides the rest behind a
scrollbar on a screen wide enough to show them all — which is how this was
reported. max-content lets a wide table use the window; min-width keeps a
narrow one from collapsing to nothing on a large display. */
.wrap{max-width:max-content;min-width:min(1100px,100%);margin:0 auto}
h1{margin:0 0 .25rem;font-size:1.35rem}
.meta{margin:0 0 1rem;color:var(--mut);font-size:.8rem}
.scroll{overflow-x:auto;border:1px solid var(--line);border-radius:8px}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
/* A visible scrollbar. Windows hides overlay scrollbars until something moves,
so a table that scrolls looks exactly like a table that is missing columns. */
.scroll{overflow-x:auto;border:1px solid var(--line);border-radius:8px;
scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.scroll::-webkit-scrollbar{height:10px}
.scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px}
/* width:auto, not 100%: columns take the width their contents need. With
width:100% the browser squeezes them to fit the container first and only then
overflows, so a callsign could end up wrapped while empty space sat further
along the row. min-width keeps a two-column table filling the frame. */
table{border-collapse:collapse;width:auto;min-width:100%;font-variant-numeric:tabular-nums}
th,td{padding:.45rem .6rem;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{position:sticky;top:0;background:var(--head);font-size:.72rem;letter-spacing:.05em;
text-transform:uppercase;color:var(--mut);cursor:pointer;user-select:none}