f716736ad2d4a1f8832bb945e2d21ea95ba7140b max Fri Sep 18 09:03:07 2026 -0700 hgSession: fix oversized save-card inputs, move backup link into Advanced #Preview2 week - bugs introduced now will need a build patch to fix The name/description boxes on the save card used flex-basis for width inside a column flex container, where flex-basis sets height instead - they were rendering hundreds of pixels tall. Also folds "Back up custom tracks" into the Advanced panel as a single link across the top, above the load/save columns, instead of its own bar under the save card. refs #38311 diff --git src/hg/htdocs/style/hgSession.css src/hg/htdocs/style/hgSession.css index c6eef86633e..8163bf80f5a 100644 --- src/hg/htdocs/style/hgSession.css +++ src/hg/htdocs/style/hgSession.css @@ -11,52 +11,49 @@ #sessionApp .sessIntro a { color:var(--accent); } #sessionApp .sessIntro a:hover { color:var(--accentHover); } /* Save-current-view card - the primary action. Neutral light-grey panel. */ #sessionApp .sessSaveCard { border:0; background:#f6f8fa; padding:14px 16px; display:flex; flex-direction:column; gap:12px; margin:0 0 20px; } #sessionApp .sessSaveHead { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; } /* Title and the current-view summary share one font size (title is just bold). */ #sessionApp .sessSaveTitle { font-size:14px; font-weight:700; color:var(--accent); } #sessionApp .sessSaveWhat { font-size:14px; } #sessionApp .sessSaveRow { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } /* Name/description each get a label above the box (like .sessAdvItem) instead of a wordy * placeholder, and a box sized for what people actually type rather than the full card width. */ #sessionApp .sessSaveField { display:flex; flex-direction:column; gap:5px; } #sessionApp .sessSaveField > .lab { font-weight:700; color:var(--ink); font-size:13px; } -#sessionApp .sessSaveInput { flex:0 1 260px; min-width:180px; height:34px; box-sizing:border-box; +/* Width, not flex-basis: .sessSaveField is a column flex container, so a flex-basis here would + * set the item's height (the column's main axis), not its width - that bug once made these boxes + * hundreds of pixels tall. */ +#sessionApp .sessSaveInput { width:260px; max-width:100%; height:34px; box-sizing:border-box; padding:0 11px; font-size:14px; border:1px solid var(--btnLine); border-radius:0; background:#fff; font-family:inherit; } -#sessionApp #sessSaveDesc { flex:0 1 420px; } +#sessionApp #sessSaveDesc { width:420px; } #sessionApp .sessSaveCheck { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink); white-space:nowrap; } /* One-click "overwrite the most recently saved session" - a compact thin bar above the save card. */ #sessionApp .sessRecent { display:flex; align-items:center; gap:8px; flex-wrap:wrap; border:0; background:#f6f8fa; padding:6px 12px; font-size:14px; margin:0 0 12px; } #sessionApp .sessRecent .gbPill { padding:2px 10px; } #sessionApp .sessRecentTime { color:var(--muted); } /* Info bubble (navy circled i) used for the recent-update hint and session descriptions. */ #sessionApp .sessInfo { color:var(--accent); cursor:help; font-size:15px; line-height:1; } -/* Back up custom tracks - moved out of Advanced so it's visible without opening that panel. */ -#sessionApp .sessBackup { display:flex; align-items:center; gap:12px; flex-wrap:wrap; - border:0; background:#f6f8fa; padding:6px 12px; font-size:13px; color:var(--muted); - margin:0 0 12px; } -#sessionApp .sessBackup form { margin:0; } - /* Section heading ("Your saved sessions") separating the save card from the table. */ #sessionApp .gbSection { margin-top:4px; } /* Note at the end of the table toolbar, pointing at our other servers: they keep their own * sessions, so a session saved there is not in this list. */ #sessionApp .sessMirrorNote { margin:0; } #sessionApp .sessMirrorNote a { color:var(--accent); } #sessionApp .sessMirrorNote a:hover { color:var(--accentHover); } /* Toolbar above the table: DataTables search box, page-length menu and the Select button. */ #sessionApp .sessToolbar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 10px; } #sessionApp #sessionAppTable_length { margin:0; font-size:14px; color:var(--ink); } #sessionApp #sessionAppTable_length select { border:1px solid var(--btnLine); border-radius:0; padding:4px 6px; font-size:14px; background:#fff; margin:0 4px; } #sessionApp #sessionAppTable_filter { margin:0; } @@ -88,30 +85,35 @@ /* Advanced collapsible - the rarer load/backup/reset options. Collapsed it is a thin bar; sits * between the save card and the sessions table. */ #sessionApp .sessAdv { border:0; margin:0 0 20px; } #sessionApp .sessAdvHead { display:flex; align-items:center; gap:9px; padding:11px 14px; background:#f6f8fa; cursor:pointer; font-size:14px; font-weight:700; color:var(--accent); user-select:none; } #sessionApp .sessAdvHead .caret { width:12px; display:inline-block; } #sessionApp .sessAdvBody { padding:16px 16px; display:grid; grid-template-columns:1fr 1fr; gap:18px 28px; background:#f6f8fa; font-size:14px; } @media (max-width:820px) { #sessionApp .sessAdvBody { grid-template-columns:1fr; } } /* Load column and save column, so the panel reads as two purposes instead of one flat list. */ #sessionApp .sessAdvCol { display:flex; flex-direction:column; gap:18px; } #sessionApp .sessAdvColHead { font-weight:700; color:var(--ink); font-size:12px; text-transform:uppercase; letter-spacing:.03em; opacity:.7; } +/* Back up custom tracks - a single link across the top of the panel, above the two columns. */ +#sessionApp .sessAdvTop { grid-column:1 / -1; border-bottom:1px solid var(--btnLine); + padding-bottom:14px; margin-bottom:4px; } +#sessionApp .sessAdvTop a { color:var(--accent); } +#sessionApp .sessAdvTop a:hover { color:var(--accentHover); } /* "Other" (reset) belongs to neither column, so it spans both, below them. */ #sessionApp .sessAdvOther { grid-column:1 / -1; border-top:1px solid var(--btnLine); padding-top:14px; margin-top:4px; } #sessionApp .sessAdvItem { display:flex; flex-direction:column; gap:7px; } #sessionApp .sessAdvItem > .lab { font-weight:700; color:var(--ink); } #sessionApp .sessAdvRow { display:flex; gap:8px; flex-wrap:wrap; align-items:center; } #sessionApp .sessAdvInput { flex:1 1 140px; min-width:110px; height:32px; box-sizing:border-box; border:1px solid var(--btnLine); border-radius:0; padding:0 9px; font-size:14px; background:#fff; font-family:inherit; } #sessionApp .sessAdvLinks { display:flex; gap:16px; flex-wrap:wrap; } #sessionApp .sessAdvLinks a { color:var(--accent); } #sessionApp .sessAdvLinks a:hover { color:var(--accentHover); } /* Small inline status line for AJAX feedback (errors in maroon). */ #sessionApp .sessMsg { font-size:13px; margin:0 0 12px; }