bowenliang123
679dc669f4
Opening a category or an exact row grew the rows region's flex base, and the capped card charged the whole deficit to the map — the only other shrinkable item — folding it to its 40px floor on every pick. The map sat in the fixed zone but still changed shape under the click. Pin the map's flex base so opened rows scroll the rows region instead of squeezing it; a percentage ceiling still folds the map when a capped card is genuinely too short (a content-sized card ignores it). The /context dialog's hard viewport cap is the one real pressure: while the map shows, the dialog fills its cap and the browser card and rows region size from the leftover, so the map folds exactly to what is left instead of overflowing.
35 lines
3.7 KiB
CSS
35 lines
3.7 KiB
CSS
/* Fixed positioning escapes the composer anchor; the card's percentage width resolves against the backdrop, so a docked mask clamps it inside the main column. */
|
||
.lc-modal-backdrop { position: fixed; inset: 0; z-index: 200; background: var(--dsw-alias-bg-mask-1, rgba(0, 0, 0, 0.45)); display: flex; align-items: center; justify-content: center; }
|
||
/* Side margins keep 2/3 of the old fixed-720px cap's (pane/3 + 480 ⇒ margin = pane/3 − 240); the 32px floor is the old 24px gutter cut to 16. */
|
||
.lc-modal-card { width: min(calc(33.333% + 480px), calc(100% - 32px)); --lc-modal-h: min(82vh, 760px); max-height: var(--lc-modal-h); overflow-y: auto; box-sizing: border-box; background: var(--dsw-alias-bg-layer-1); border: 1px solid var(--dsw-alias-border-l2); border-radius: 12px; box-shadow: var(--dsw-shadow-lv3, 0 12px 32px rgba(0, 0, 0, 0.4)); padding: 16px 18px 18px; color: var(--dsw-alias-label-primary); font-size: 13px; }
|
||
.lc-modal-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
|
||
.lc-modal-title { font-weight: 600; font-size: 14px; }
|
||
.lc-modal-close { margin-left: auto; border: 0; background: transparent; color: var(--dsw-alias-label-secondary); font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 6px; cursor: pointer; font-family: inherit; transition: color var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, ease-in-out), background-color var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, ease-in-out); }
|
||
/* The /context dialog is a fixed-height column: the head and the composition card stay put while the browser
|
||
card shrinks and its rows region scrolls — the dialog never scrolls as a whole. Scoped to the context
|
||
modal; the small gate dialog keeps its content-sized block flow. The browser card's own `min-height: 0`
|
||
(browser.css) is what lets the shrink reach its rows region. */
|
||
.lc-modal-fill { display: flex; flex-direction: column; }
|
||
.lc-modal-fill > .lc-modal-head { flex: none; }
|
||
.lc-modal-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
|
||
.lc-modal-body > * { flex: none; }
|
||
.lc-modal-body > .lc-br { flex: 0 1 auto; }
|
||
/* While the map is shown, fill the dialog's viewport cap and give the body's leftover to the browser card
|
||
and its rows region: opened rows never squeeze the map, and the map folds exactly to the remaining height,
|
||
which the fixed head reserve of browser.css's ceiling cannot track. */
|
||
.lc-modal-fill:has(.lc-map) { height: var(--lc-modal-h); }
|
||
.lc-modal-fill:has(.lc-map) .lc-modal-body > .lc-br { flex: 1 1 0; }
|
||
.lc-modal-fill:has(.lc-map) .lc-br-scroll { flex: 1 1 0; }
|
||
.lc-modal-fill:has(.lc-map) .lc-map { flex: 0 1 auto; max-height: none; }
|
||
|
||
/* ---- the baseline-gate dialog (upgradeGate.tsx) ---- */
|
||
.lc-gate-card { width: min(440px, calc(100vw - 48px)); }
|
||
.lc-gate-body { color: var(--dsw-alias-label-secondary); line-height: 1.7; }
|
||
.lc-gate-versions { display: flex; gap: 24px; margin-top: 14px; }
|
||
.lc-gate-version { display: flex; flex-direction: column; gap: 2px; }
|
||
.lc-gate-version-label { font-size: 11px; color: var(--dsw-alias-label-secondary); }
|
||
.lc-gate-version-value { font-weight: 600; font-family: var(--dsw-font-family-mono, monospace); color: var(--dsw-alias-label-primary); }
|
||
.lc-gate-or-newer { margin-left: 6px; font-family: inherit; font-weight: 400; font-size: 11px; color: var(--dsw-alias-label-secondary); }
|
||
.lc-gate-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
|
||
.lc-gate-ok { border: 0; border-radius: 6px; padding: 6px 16px; font-size: 12px; font-family: inherit; cursor: pointer; background: var(--dsw-alias-button-primary-fill); color: var(--dsw-alias-label-primary-foreground); transition: filter var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, ease-in-out); }
|