@young1lin/dsh-ui-gitworkbench 0.1.11 → 0.1.13

package/src/client/styles/history-filters.css

@@ -0,0 +1,400 @@
+/* Author / committer / exact date — the precise answers the row's summary
+   ("3 weeks ago") deliberately defers to the hover card. */
+.commitPopMeta {
+  display: flex; flex-direction: column; gap: 2px;
+  color: var(--gs-fg-muted);
+  font-size: var(--gs-t-dense); line-height: 16px;
+}
+/* The filter box in the history pane head — it flexes to fill the head beside
+   the title (the funnel button is flex:none), so a wide pane gets a wide box
+   and a narrow pane still leaves room to type. */
+.commitFilter {
+  flex: 1 1 auto; min-width: 120px;
+  height: var(--gs-h-control); box-sizing: border-box;
+  padding: 0 10px;
+  border: 1px solid var(--gs-border-soft); border-radius: var(--gs-r-control);
+  background: var(--gs-bg); color: var(--gs-fg);
+  font-family: inherit; font-size: var(--gs-t-dense);
+  outline: none;
+}
+.commitFilter:focus { border-color: var(--gs-accent); }
+.commitFilter::placeholder { color: var(--gs-fg-faint); }
+/* Active criteria under the head: one removable chip each, grammar tokens as
+   their own labels — the chip IS the query it would take to retype it. */
+.filterChips {
+  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
+  flex: none;
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--gs-border-soft);
+}
+.filterChip {
+  display: inline-flex; align-items: center; gap: 2px;
+  max-width: 220px;
+  border: 1px solid var(--gs-border-soft); border-radius: var(--gs-r-control);
+  background: var(--gs-surface-2);
+  font-size: var(--gs-t-dense); line-height: 18px;
+}
+.filterChipLabel {
+  padding: 2px 4px 2px 8px;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  color: var(--gs-fg-muted);
+}
+.filterChipRemove {
+  flex: none;
+  padding: 0 6px;
+  border: none; border-left: 1px solid var(--gs-border-soft);
+  background: transparent; color: var(--gs-fg-dim);
+  font-family: inherit; font-size: var(--gs-t-dense); line-height: 20px;
+  cursor: pointer;
+}
+.filterChipRemove:hover { color: var(--gs-del); }
+.filterClear {
+  border: none; background: transparent;
+  padding: 2px 4px;
+  color: var(--gs-fg-faint);
+  font-family: inherit; font-size: var(--gs-t-dense); line-height: 18px;
+  cursor: pointer;
+}
+.filterClear:hover { color: var(--gs-fg); }
+/* The funnel dropdown — RefPicker's positioning pattern (relative anchor,
+   absolute panel, dismiss-on-outside). Grows leftward: it sits at the pane's
+   right edge. */
+.funnel { position: relative; display: inline-flex; }
+/* The button itself carries no geometry of its own — it joined the shared
+   control vocabulary above (`.btn, .refButton, …`) so it reads as a sibling of
+   every other button in the drawer, not a foreign element. */
+.funnelButton.funnelButtonActive { color: var(--gs-accent); border-color: var(--gs-accent); }
+
+/* The panel is a flex COLUMN with exactly ONE scrolling child. It used to
+   scroll itself AND cap its list at 240px: two nested scroll containers in a
+   331px box that had ~700px of anchor space to spend, so a long roster got a
+   fat inner scrollbar instead of the height already available. The tab strip
+   and the footer are `flex: none`; the list takes what is left. */
+.funnelPop {
+  position: fixed; z-index: 40;
+  display: flex; flex-direction: column;
+  width: 320px; max-width: calc(100vw - 24px);
+  box-sizing: border-box;
+  overflow: hidden;
+  border: 1px solid var(--gs-border); border-radius: var(--gs-r-surface);
+  background: var(--gs-panel);
+  box-shadow: 0 16px 40px var(--gs-shadow);
+  font-size: var(--gs-t-dense);
+}
+/* One section at a time — the panel's height is a property of its design,
+   not of how many authors the repository happens to have. The strip is a
+   segmented control (inset track, raised active chip) rather than one
+   outlined pill beside two bare words, which read as a button and two labels
+   instead of one three-way choice. */
+.funnelTabs {
+  flex: none;
+  display: flex; gap: 2px;
+  margin: 8px 8px 0;
+  padding: 2px;
+  border: 1px solid var(--gs-border-soft); border-radius: var(--gs-r-control);
+  background: var(--gs-bg);
+}
+.funnelTab {
+  flex: 1; min-width: 0;
+  box-sizing: border-box;
+  height: var(--gs-h-compact); padding: 0 8px;
+  /* Transparent rather than none: the shared selected rule paints its
+     members through `border-color`, and a border that is not there takes
+     no colour. Inside `border-box`, so the strip does not grow by 2px. */
+  border: 1px solid transparent; border-radius: calc(var(--gs-r-control) - 3px);
+  background: transparent;
+  color: var(--gs-fg-dim);
+  font-family: inherit; font-size: var(--gs-t-dense); line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background 120ms ease, color 120ms ease;
+}
+.funnelTab:hover { color: var(--gs-fg); }
+/* .funnelTabActive: see the shared selected-state rule in controls.css. */
+.funnelTab:focus-visible { outline: 2px solid var(--gs-accent); outline-offset: 1px; }
+/* A tab's own criteria count, so the two sections nobody is looking at still
+   say they hold something. */
+.funnelTabCount { margin-left: 4px; color: var(--gs-accent); font-variant-numeric: tabular-nums; }
+
+/* The body of the active section. Everything inside is `flex: none` except
+   the list, which is the one thing allowed to scroll. */
+.funnelPane {
+  flex: 1 1 auto; min-height: 0;
+  display: flex; flex-direction: column; gap: 6px;
+  padding: 8px;
+}
+.funnelCaption {
+  flex: none;
+  color: var(--gs-fg-faint);
+  font-size: var(--gs-t-meta); line-height: 14px;
+  letter-spacing: 0.04em; text-transform: uppercase;
+}
+
+/* Which bound a picked day lands in. Deliberately NOT the tab strip's shape:
+   a rect track with an accent-tinted chip under a caption, because two
+   identical pill rows stacked six pixels apart said nothing about meaning two
+   different things. */
+.funnelBounds {
+  flex: none;
+  display: flex; gap: 2px;
+  padding: 2px;
+  border: 1px solid var(--gs-border-soft); border-radius: var(--gs-r-control);
+  background: var(--gs-bg);
+}
+.funnelBoundBtn {
+  flex: 1; min-width: 0;
+  box-sizing: border-box;
+  height: var(--gs-h-compact); padding: 0 6px;
+  border: 1px solid transparent; border-radius: calc(var(--gs-r-control) - 3px);
+  background: transparent;
+  color: var(--gs-fg-dim);
+  font-family: inherit; font-size: var(--gs-t-dense); line-height: 1;
+  cursor: pointer;
+  transition: background 120ms ease, color 120ms ease;
+}
+.funnelBoundBtn:hover { color: var(--gs-fg); }
+/* .funnelBoundBtnActive: see the shared selected-state rule in controls.css. */
+
+/* The calendar — modern-grid look in the drawer's own tokens. */
+.cal { flex: none; display: flex; flex-direction: column; gap: 4px; }
+.calHead { display: flex; align-items: center; gap: 4px; }
+.calTitle {
+  flex: 1; text-align: center;
+  color: var(--gs-fg);
+  font-size: var(--gs-t-dense); line-height: 20px;
+}
+.calNav {
+  flex: none;
+  width: var(--gs-h-compact); height: var(--gs-h-compact); padding: 0;
+  border: none; border-radius: var(--gs-r-control);
+  background: transparent;
+  color: var(--gs-fg-dim);
+  font-family: inherit; font-size: var(--gs-t-ui);
+  cursor: pointer;
+}
+.calNav:hover { color: var(--gs-fg); background: var(--gs-raise); }
+.calWeek, .calGrid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+.calWeek span {
+  text-align: center;
+  color: var(--gs-fg-faint);
+  font-size: var(--gs-t-meta); line-height: 14px;
+}
+.calGrid button {
+  height: var(--gs-h-compact);
+  border: none; border-radius: var(--gs-r-control);
+  background: transparent;
+  color: var(--gs-fg-muted);
+  font-family: inherit; font-size: var(--gs-t-dense);
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+}
+.calGrid button:hover { background: var(--gs-raise); color: var(--gs-fg); }
+.calGrid button.calOut { color: var(--gs-fg-fainter); }
+.calGrid button.calToday { color: var(--gs-accent); font-weight: 600; }
+/* Days strictly between the two bounds: the span the filter actually means,
+   which two lone marked endpoints never showed. */
+.calGrid button.calIn { background: var(--gs-accent-bg); color: var(--gs-fg); }
+.calGrid button.calMark {
+  background: var(--gs-accent);
+  color: var(--gs-on-accent);
+  font-weight: 600;
+}
+
+/* The two bound readouts, side by side under the grid. */
+.funnelBoundRows { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
+.funnelBoundRow {
+  display: flex; align-items: center; gap: 4px; min-width: 0;
+  box-sizing: border-box;
+  padding: 3px 6px;
+  border: 1px solid var(--gs-border-soft); border-radius: var(--gs-r-control);
+  background: var(--gs-bg);
+  font-size: var(--gs-t-meta); line-height: 16px;
+}
+.funnelBoundKey { flex: none; color: var(--gs-fg-faint); }
+.funnelBoundVal {
+  flex: 1; min-width: 0;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  color: var(--gs-fg-faint);
+  font-variant-numeric: tabular-nums;
+}
+.funnelBoundValSet { color: var(--gs-fg); }
+.funnelBoundClear {
+  flex: none;
+  padding: 0 2px;
+  border: none; background: transparent;
+  color: var(--gs-fg-dim);
+  font-family: inherit; font-size: var(--gs-t-dense); line-height: 1;
+  cursor: pointer;
+}
+.funnelBoundClear:hover { color: var(--gs-del); }
+
+.funnelSearch {
+  flex: none;
+  box-sizing: border-box;
+  height: var(--gs-h-compact); padding: 0 8px;
+  border: 1px solid var(--gs-border-soft); border-radius: var(--gs-r-control);
+  background: var(--gs-bg); color: var(--gs-fg);
+  font-family: inherit; font-size: var(--gs-t-dense);
+  outline: none;
+}
+.funnelSearch::placeholder { color: var(--gs-fg-faint); }
+.funnelSearch:focus { border-color: var(--gs-accent); box-shadow: 0 0 0 2px var(--gs-accent-bg); }
+.funnelList {
+  flex: 1 1 auto; min-height: 0;
+  overflow-y: auto; overscroll-behavior: contain;
+  display: flex; flex-direction: column; gap: 1px;
+  margin: 0 -4px; padding: 0 4px;
+  scrollbar-width: thin; scrollbar-color: var(--gs-fg-fainter) transparent;
+}
+.funnelList::-webkit-scrollbar { width: 10px; }
+.funnelList::-webkit-scrollbar-track { background: transparent; }
+.funnelList::-webkit-scrollbar-thumb {
+  background: var(--gs-fg-fainter);
+  border: 3px solid transparent; border-radius: var(--gs-r-pill);
+  background-clip: content-box;
+}
+/* Every row is the same four slots — chevron, tick, glyph, name — then the
+   count. Directories used to skip the glyph that files carried, so a folder
+   name and the file names under it started at different x and the list had a
+   ragged left edge. */
+.funnelRow {
+  display: flex; align-items: center; gap: 6px;
+  box-sizing: border-box;
+  min-height: 24px; padding: 0 4px;
+  border-radius: var(--gs-r-control);
+  cursor: pointer;
+}
+.funnelRow:hover { background: var(--gs-raise); }
+.funnelRow:has(input[type='checkbox']:checked) .funnelName,
+.funnelRow:has(input[type='checkbox']:indeterminate) .funnelName { color: var(--gs-fg); }
+/* The tick IS the input — no wrapper span, no visually-hidden twin: the live
+   probes select `[class*="funnelRow"] input[type=checkbox]` and the directory
+   row's DIRECT child, so the markup has to stay flat. `appearance: none`
+   hands us the box; the mark is a rotated border, so nothing ships as an
+   asset and every state recolors with the theme. */
+.funnelRow input[type='checkbox'] {
+  appearance: none; -webkit-appearance: none;
+  flex: none; position: relative;
+  box-sizing: border-box;
+  width: 14px; height: 14px; margin: 0;
+  border: 1px solid var(--gs-fg-fainter); border-radius: 3px;
+  background: transparent;
+  cursor: pointer;
+  transition: background 120ms ease, border-color 120ms ease;
+}
+.funnelRow input[type='checkbox']:hover { border-color: var(--gs-fg-dim); }
+.funnelRow input[type='checkbox']:checked,
+.funnelRow input[type='checkbox']:indeterminate {
+  background: var(--gs-accent); border-color: var(--gs-accent);
+}
+.funnelRow input[type='checkbox']:focus-visible { outline: 2px solid var(--gs-accent); outline-offset: 1px; }
+.funnelRow input[type='checkbox']:checked::after {
+  content: ''; position: absolute;
+  left: 4px; top: 1px; width: 3px; height: 7px;
+  border: solid var(--gs-on-accent); border-width: 0 1.5px 1.5px 0;
+  transform: rotate(42deg);
+}
+/* Partial — a folder some of whose subtree is ticked. */
+.funnelRow input[type='checkbox']:indeterminate::after {
+  content: ''; position: absolute;
+  left: 2px; top: 5px; width: 8px; height: 2px;
+  border-radius: 1px;
+  background: var(--gs-on-accent);
+}
+/* Tree chrome in the drawer's own visual language: a directory folds with the
+   chevron the file tree uses, and both glyphs are inline SVG in the shape
+   IntelliJ's New UI icon set uses — a 16px grid, 1px strokes, no fill,
+   rounded joins, outlines rather than the filled silhouettes the old UI
+   shipped. Drawn in `PathDirGlyph` / `PathFileGlyph` rather than imported:
+   the bundle purity gate forbids an icon package, and the picker needs
+   exactly these two. Indentation is the row's own padding ALONE; the nested
+   rail this used to draw was `--gs-border-soft` over `--gs-panel` (the same
+   value as `--gs-raise` in the GitHub palettes, so it vanished under hover)
+   and its margin double-counted every level. */
+.pathNode { display: flex; flex-direction: column; }
+.pathChildren { display: flex; flex-direction: column; }
+/* One shared slot so a folder and a file start their names at the same x —
+   New UI draws both on the same 16px grid, and the column only lines up if
+   the box does too. `--gs-fg-dim` is the neutral the tree icons sit at there:
+   present, but never louder than the filename beside them. */
+.pathFileGlyph, .pathDirGlyph {
+  flex: none;
+  width: 16px; height: 16px;
+  color: var(--gs-fg-dim);
+}
+.funnelRow:hover .pathFileGlyph,
+.funnelRow:hover .pathDirGlyph { color: var(--gs-fg-muted); }
+.funnelName {
+  flex: 1; min-width: 0;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  color: var(--gs-fg-muted);
+}
+.funnelCount {
+  flex: none;
+  color: var(--gs-fg-faint);
+  font-size: var(--gs-t-meta);
+  font-variant-numeric: tabular-nums;
+}
+.funnelMore { color: var(--gs-fg-faint); padding: 4px 6px; }
+.funnelChevron {
+  flex: none;
+  width: 14px; padding: 0;
+  border: none; background: transparent;
+  color: var(--gs-fg-faint);
+  font-family: inherit; font-size: 9px; line-height: 16px;
+  cursor: pointer;
+}
+.funnelChevron:hover:not(:disabled) { color: var(--gs-fg); }
+.funnelChevron:disabled { cursor: default; }
+.funnelPresets { flex: none; display: flex; gap: 4px; }
+/* `.funnelPreset` shipped with `flex: none` and nothing else, so it never
+   joined the shared button vocabulary and the three date presets rendered as
+   the browser's default grey buttons — the one patch of unthemed chrome in
+   the drawer. It is in both selector lists now; this only sizes them to share
+   one row. */
+.funnelPreset { flex: 1 1 0; min-width: 0; padding: 0 6px; }
+/* .funnelPresetActive: see the shared selected-state rule in controls.css. */
+
+/* The footer says what the panel is currently asking git for. Without it the
+   only feedback lived on the chip row BEHIND the panel, so a reader had to
+   close the thing to find out whether their ticks took. */
+.funnelFoot {
+  flex: none;
+  display: flex; align-items: center; justify-content: space-between; gap: 8px;
+  padding: 6px 10px;
+  border-top: 1px solid var(--gs-border-soft);
+  background: var(--gs-bg);
+  font-size: var(--gs-t-meta); line-height: 16px;
+}
+.funnelFootCount { color: var(--gs-fg-faint); font-variant-numeric: tabular-nums; }
+.funnelFootCountOn { color: var(--gs-fg-muted); }
+.funnelFootClear {
+  flex: none;
+  padding: 2px 6px;
+  border: none; border-radius: var(--gs-r-control);
+  background: transparent;
+  color: var(--gs-fg-dim);
+  font-family: inherit; font-size: var(--gs-t-meta); line-height: 16px;
+  cursor: pointer;
+}
+.funnelFootClear:hover:not(:disabled) { color: var(--gs-fg); background: var(--gs-raise); }
+.funnelFootClear:disabled { color: var(--gs-fg-fainter); cursor: default; }
+
+.commitPopSubject {
+  color: var(--gs-fg);
+  font-size: var(--gs-t-ui); font-weight: 600; line-height: 18px;
+  white-space: pre-wrap; overflow-wrap: anywhere;
+  user-select: text;
+}
+.commitPopBody {
+  margin: 0;
+  color: var(--gs-fg-muted);
+  font-family: inherit;
+  font-size: var(--gs-t-dense); line-height: 18px;
+  white-space: pre-wrap; overflow-wrap: anywhere;
+  user-select: text;
+}

package/src/client/styles/history.css

@@ -0,0 +1,276 @@
+/* Drawer tabs — mirrors the app's own tab bar: 13/16 text at weight 500, a
+   tertiary label, the selected one riding the accent over a 2px bar. */
+.tabs {
+  display: flex; gap: 24px;
+  flex: none;
+  padding: 0 var(--gs-gutter);
+  border-bottom: 1px solid var(--gs-border-soft);
+  background: var(--gs-surface-2);
+  font-family: inherit;
+}
+.tab {
+  position: relative;
+  padding: 8px 0 9px;
+  border: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: var(--gs-t-ui); line-height: 16px; font-weight: 500;
+  color: var(--gs-fg-dim);
+  cursor: pointer;
+}
+.tab::after {
+  content: '';
+  position: absolute; right: 0; bottom: 1px; left: 0;
+  height: 2px; border-radius: 2px;
+  background: transparent;
+}
+.tabActive { color: var(--gs-accent); }
+.tabActive::after { background: var(--gs-accent); }
+
+/* Compare tab: the base/head ref pickers. */
+.compareBar {
+  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
+  flex: none;
+  padding: 8px var(--gs-gutter);
+  border-bottom: 1px solid var(--gs-border-soft);
+  background: var(--gs-surface-2);
+  color: var(--gs-fg-dim);
+  font-family: var(--dsw-font-ui, system-ui, sans-serif);
+  font-size: var(--gs-t-dense);
+}
+.compareArrow { color: var(--gs-fg-faint); }
+
+/* Ref picker: a button that opens a filter box over a scrolling list. Sized for
+   a repository with hundreds of branches, where a chip row or a plain select
+   stops being usable. */
+.refPicker { position: relative; display: inline-flex; align-items: center; gap: 6px; }
+.refLabel { flex: none; color: var(--gs-fg-faint); }
+.refButton { max-width: 260px; justify-content: space-between; }
+.refValue { min-width: 0; overflow: hidden; }
+.refCaret { flex: none; color: var(--gs-fg-faint); font-size: 9px; }
+.refPop {
+  position: absolute; top: calc(100% + 4px); left: 0; z-index: 10;
+  display: flex; flex-direction: column;
+  width: 300px; max-width: 80vw;
+  border: 1px solid var(--gs-border); border-radius: var(--gs-r-control);
+  background: var(--gs-panel);
+  box-shadow: 0 12px 32px var(--gs-shadow);
+  overflow: hidden;
+}
+/* A short fixed menu rather than a branch list: no search box, no footer, and
+   sized to its own labels instead of the 300px a few hundred refs need. Anchored
+   right because the pickers that use it sit in a bar's right-hand cluster, where
+   a left-anchored popover would open off the drawer. */
+.menuPop {
+  width: auto; min-width: 100%;
+  left: auto; right: 0;
+  padding: 4px;
+}
+.refSearch {
+  flex: none;
+  padding: 7px 10px;
+  border: 0; border-bottom: 1px solid var(--gs-border-soft);
+  background: var(--gs-bg); color: var(--gs-fg);
+  font-family: inherit; font-size: var(--gs-t-dense);
+  outline: none;
+}
+.refSearch::placeholder { color: var(--gs-fg-faint); }
+/* Bounded so the popover never runs off the drawer, whatever the branch count. */
+.refList { flex: 1; max-height: 280px; overflow-y: auto; padding: 4px; }
+.refGroup {
+  padding: 6px 8px 3px;
+  color: var(--gs-fg-faint);
+  font-size: var(--gs-t-meta); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
+}
+.refRow {
+  display: flex; align-items: center; gap: 6px;
+  box-sizing: border-box; width: 100%;
+  padding: 5px 8px;
+  border: 0; border-radius: var(--gs-r-control);
+  background: transparent; color: var(--gs-fg-muted);
+  font-family: inherit; font-size: var(--gs-t-dense);
+  text-align: left; cursor: pointer;
+}
+.refRow:hover { background: var(--gs-raise); color: var(--gs-fg); }
+/* .refRowActive: see the shared selected-state rule at the foot of the file. */
+/* Keeps a branch without a worktree aligned with one that has the glyph. */
+.refRowSpacer { flex: none; width: 12px; }
+.refRowName { flex: 1 1 auto; min-width: 0; overflow: hidden; }
+.refEmpty { padding: 14px 10px; color: var(--gs-fg-faint); font-size: var(--gs-t-dense); }
+.refFoot {
+  flex: none;
+  padding: 5px 10px;
+  border-top: 1px solid var(--gs-border-soft);
+  color: var(--gs-fg-faint); font-size: var(--gs-t-meta);
+}
+
+/* Commit log — its own full-height pane beside the file tree. Rows are stacked
+   so each subject gets the pane's full width instead of a 340px ellipsis. */
+.commitsPane {
+  /* Shrinkable, with the floor as a min-width rather than a JS clamp alone: a
+     width dragged in one tab must not squeeze the diff to nothing when a third
+     pane appears in another. The floors come from the panel's own constants, so
+     the clamp and the stylesheet cannot drift apart. */
+  flex: 0 1 auto; box-sizing: border-box;
+  display: flex; flex-direction: column; min-height: 0;
+  /* Capped, so every pixel past the cap goes to the diff — the pane whose
+     content cannot wrap. */
+  width: 26%; min-width: var(--gs-min-commits); max-width: 340px;
+  background: var(--gs-surface);
+}
+/* Shared header bar for the commit and tree panes. Its own height comes from
+   the compact control it hosts, so a pane with tools and a pane without one
+   still line up across the divider. */
+.paneHead {
+  /* Wraps rather than overflows. Dragged narrow the pane cannot hold a title,
+     a funnel and a search box on one line, and what it used to do was clip the
+     search box at the pane's edge — a control half off the screen, with no
+     sign that the rest of it existed. */
+  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
+  flex: none;
+  min-height: 37px; box-sizing: border-box;
+  padding: 6px var(--gs-gutter-pane);
+  border-bottom: 1px solid var(--gs-border-soft);
+  color: var(--gs-fg-dim);
+  font-family: var(--dsw-font-ui, system-ui, sans-serif);
+  font-size: var(--gs-t-dense);
+}
+.paneTitle { font-weight: 600; }
+/* Zero-height probe below the last row; scrolling it into view fetches the next
+   page. It carries no pixels of its own so it cannot disturb the list. */
+.commitsSentinel { flex: none; height: 1px; }
+.commitsFoot {
+  flex: none;
+  padding: 8px;
+  color: var(--gs-fg-faint);
+  font-family: var(--dsw-font-ui, system-ui, sans-serif);
+  font-size: var(--gs-t-meta); text-align: center;
+  /* Reserved whether or not there is text, so arriving at the end of the list
+     does not shift the rows above it. */
+  min-height: 16px;
+}
+
+/* `flex: 1` with `min-height: 0` gives this scroller a DEFINITE height from the
+   pane. A percentage max-height cannot: its parent is sized by content, so the
+   percentage has nothing to resolve against and the list grows without bound —
+   which is what pushed the file tree off screen and the footer out of reach. */
+/* No gap between lines and no left padding: the graph column runs down the left
+   edge and a lane has to reach the next row to stay one line. The rows' own
+   breathing room is inside `.commit`, which keeps its inset and rounding. */
+.commits {
+  display: flex; flex-direction: column;
+  flex: 1; min-height: 0;
+  overflow-y: auto;
+  padding: 4px 6px 4px 0;
+}
+/* One list line: the graph slice, then the row. Fixed height, because the SVG
+   is drawn at exactly this height and the lanes only join if they agree. */
+.commitLine {
+  display: flex; align-items: stretch;
+  flex: none;
+  /* Published by the panel from `COMMIT_ROW_H`, which the lane graph also draws
+     each row's segment at — one source, because a row and its segment that
+     disagree leave the lanes short of the seam between rows. The two
+     arrangements want different rows, which is why this is a property and not
+     a number. Guarded by tests/commit-row-height.test.ts. */
+  height: var(--gs-commit-row);
+}
+.graphCell { flex: none; display: block; }
+/* An inset row, like dsh's own session rows: 12px radius, filled when active. */
+.commit {
+  display: flex; align-items: center; gap: 10px;
+  flex: 1 1 auto; min-width: 0; box-sizing: border-box;
+  height: 100%;
+  margin: 1px 0;
+  padding: 4px 8px;
+  border: 1px solid transparent;
+  border-radius: var(--gs-r-surface);
+  background: transparent;
+  font-family: inherit;
+  text-align: left;
+  cursor: pointer;
+  font-size: var(--gs-t-dense);
+  overflow: hidden;
+  transition: background 120ms ease, border-color 120ms ease;
+}
+/* Beside the diff the row turns into two lines: a pane of about 340px has no
+   width for the hash, the author, the date AND the subject on one, and the
+   subject is the part that would have given way. Above the diff it stays one
+   line — see the row's two shapes in `CommitRow`. */
+.commitsPane[data-layout="columns"] .commit {
+  flex-direction: column; align-items: stretch; justify-content: center; gap: 2px;
+}
+/* The subject line must not absorb the row's spare height, or the two lines
+   stop sitting together in the middle of the row. */
+.commitsPane[data-layout="columns"] .commitSubjectRow { flex: none; }
+.commitTop {
+  display: flex; align-items: center; justify-content: space-between; gap: 8px;
+  min-width: 0;
+}
+.commit:hover { background: var(--gs-raise); }
+/* .commitActive: see the shared selected-state rule in controls.css. */
+/* Pushed to the right end of the row, and never squeezed: the subject is what
+   gives way when the pane narrows, because it is the part with an ellipsis to
+   give. */
+.commitMeta { flex: none; display: flex; align-items: baseline; gap: 8px; }
+.commitHash { flex: none; color: var(--gs-info); }
+.commitSubjectRow {
+  display: flex; align-items: baseline; gap: 4px;
+  flex: 1 1 auto; min-width: 0;
+}
+/* Shrinks, never grows. Growing was invisible while the list was a 26%%
+   column — the subject filled the row either way — and became a defect the
+   moment the list spanned the drawer: a subject that takes ALL the free space
+   pushes the has-a-body marker a thousand pixels right, where it reads as an
+   unexplained ellipsis next to the author rather than as "there is more to
+   this message". The row still pushes author and date to the right end;
+   .commitSubjectRow is what absorbs the slack. */
+.commitSubject {
+  flex: 0 1 auto; min-width: 0;
+  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
+  color: var(--gs-fg-muted);
+}
+.commitHasBody { flex: none; color: var(--gs-fg-faint); letter-spacing: 0.04em; }
+/* Branch and tag names pointing at this commit. Capped and ellipsised: a release
+   commit can carry a dozen refs, and none of them is worth the subject's room. */
+.commitRef {
+  flex: none;
+  max-width: 96px;
+  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
+  padding: 0 5px;
+  border: 1px solid var(--gs-accent-border); border-radius: var(--gs-r-pill);
+  background: var(--gs-accent-bg);
+  color: var(--gs-accent);
+  font-size: var(--gs-t-meta); line-height: 15px;
+}
+.commitWhen { flex: none; color: var(--gs-fg-faint); }
+/* Who wrote it — sits between hash and relative time, capped so a long name
+   cannot evict the time from the row. */
+.commitAuthor {
+  flex: none; max-width: 120px;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  color: var(--gs-fg-dim);
+}
+
+.body { display: flex; flex: 1; min-height: 0; z-index: 1; }
+/* History stacks: the commit list over the tree-and-diff row. `.bodyRow` is
+   rendered on every tab, so the unstacked tabs are a row inside a row — which
+   costs nothing and keeps one JSX shape instead of two. */
+.body[data-stacked] { flex-direction: column; }
+.bodyRow { display: flex; flex: 1 1 0; min-width: 0; min-height: 0; }
+/* Stacked, the list is sized by HEIGHT and spans the drawer; the width rules
+   it carries for the column layout would otherwise pin it to 26%. */
+.body[data-stacked] .commitsPane {
+  width: auto; max-width: none; min-width: 0;
+  height: 34%; flex: none;
+  /* The drag's clamp, restated where a RESIZE can also reach it. An inline
+     `height` in pixels survives the window getting shorter, and then the list
+     is taller than the body: the lower half goes to zero and the handle ends
+     up below the bottom edge with nothing to grab. Percentages re-resolve on
+     every layout, which is exactly what the stored pixel height cannot do.
+     Both numbers come from the panel's own constants, so there is still one
+     home for them. `max()` keeps the range from inverting in a drawer too
+     short to hold both floors — the list then simply takes its minimum. */
+  min-height: var(--gs-min-commits-tall);
+  max-height: max(var(--gs-min-commits-tall), calc(100% - var(--gs-min-stacked-lower)));
+}