@young1lin/dsh-ui-gitworkbench 0.1.5 → 0.1.7

package/src/client/GitWorkbenchPanel.module.css

@@ -501,6 +501,16 @@
 }
 .paneDivider:hover::after { opacity: 0.6; }
 .paneDividerActive::after { opacity: 0.9; height: 48px; }
+/* The same handle turned through a right angle. Both modifier rules below beat
+   the shared ones on specificity, so their order relative to them does not
+   matter — the stylesheet's usual "same value loses" trap does not apply. */
+.paneDividerY {
+  width: auto; height: 7px;
+  cursor: row-resize;
+}
+.paneDividerY::before { top: 3px; bottom: auto; left: 0; right: 0; width: auto; height: 1px; }
+.paneDividerY::after { width: 28px; height: 3px; transition: opacity 140ms ease, width 140ms ease; }
+.paneDividerY.paneDividerActive::after { width: 48px; height: 3px; }
 
 .header {
   display: flex; align-items: center; justify-content: space-between; gap: 12px;
@@ -1268,7 +1278,11 @@
    the compact control it hosts, so a pane with tools and a pane without one
    still line up across the divider. */
 .paneHead {
-  display: flex; align-items: center; gap: 8px;
+  /* 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);
@@ -1310,12 +1324,17 @@
 .commitLine {
   display: flex; align-items: stretch;
   flex: none;
-  height: 48px;
+  /* 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; flex-direction: column; justify-content: center; gap: 2px;
+  display: flex; align-items: center; gap: 10px;
   flex: 1 1 auto; min-width: 0; box-sizing: border-box;
   height: 100%;
   margin: 1px 0;
@@ -1330,16 +1349,40 @@
   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 { border-color: var(--gs-accent-border); background: var(--gs-accent-bg); }
-.commitTop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
-.commitHash { color: var(--gs-info); }
+/* 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;
-  min-width: 0;
+  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: 1; min-width: 0;
+  flex: 0 1 auto; min-width: 0;
   overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
   color: var(--gs-fg-muted);
 }
@@ -1366,6 +1409,27 @@
 }
 
 .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)));
+}
 
 /* File tree column. A peer of the commit pane and the diff, never their parent:
    each of the three scrolls on its own and keeps its full height. */
@@ -1553,7 +1617,29 @@
 .fileCountDel { color: var(--gs-del); }
 
 /* diff pane */
-.diffPane { flex: 1 1 0; min-width: var(--gs-min-diff); overflow: auto; background: var(--gs-surface); }
+/* A column, so a header can sit above the scrolled diff instead of inside it.
+   `overflow: auto` stays as the outer guard — the rename line and the
+   side-by-side pane are also children here, and one of them growing must
+   scroll rather than be clipped. */
+.diffPane {
+  flex: 1 1 0; min-width: var(--gs-min-diff);
+  display: flex; flex-direction: column;
+  overflow: auto; background: var(--gs-surface);
+}
+/* The unified view: its own header and its own scroller, filling whatever the
+   pane has left after a rename line. */
+.diffWrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; }
+.diffScroll { flex: 1 1 0; min-height: 0; overflow: auto; outline: none; }
+/* The walk's controls. Right-aligned and quiet: they belong to the diff, and
+   the diff is what the reader came for. Same shape as `.sideNav` in the
+   side-by-side pane, because it is the same control. */
+.diffNav {
+  flex: none;
+  display: flex; justify-content: flex-end; align-items: center; gap: 4px;
+  padding: 3px 12px 3px 0;
+  border-bottom: 1px solid var(--gs-border-soft);
+}
+.diffNav .blockBtn { padding-inline: 6px; line-height: 0; }
 /* The pre is as wide as its longest line (`max-content`) and at least the pane
    (`min-width: 100%`). Each row then stretches to that width, so add/delete
    tints survive horizontal scroll instead of stopping at the viewport edge. */
@@ -1570,6 +1656,7 @@
   tab-size: 4;
 }
 .renameLine {
+  flex: none;
   padding: 8px 16px;
   border-bottom: 1px solid var(--gs-border-soft);
   color: var(--gs-info);
@@ -1628,6 +1715,205 @@
 .wordAdd { background: var(--gs-add-word); border-radius: 2px; }
 .wordDel { background: var(--gs-del-word); border-radius: 2px; }
 
+/* Side-by-side diff pane. One grid holds EVERY row's four cells — a per-row
+   grid would let the column boundary drift with each row's content, and a
+   fixed split would clip long lines. Equal 1fr code tracks keep the two
+   columns identically wide however wide the widest line is, and the whole pane
+   (this view's single shared vertical scroll) carries the horizontal one. */
+/* The pane is a HEADER plus a scroller, not one wide column: the tab row
+   carries Save/Revert, and a row sized to the widest line of code pushes them
+   off the right edge of a long file — reachable only by scrolling sideways,
+   which is not where anyone looks for a toolbar. Only `.sideScroll` scrolls;
+   the tabs and the notices above it stay put on both axes. */
+.sidePane { display: flex; flex-direction: column; width: 100%; min-width: 0; height: 100%; }
+/* Vertical scrolling belongs to the pane; horizontal belongs to each column,
+   which is what lets the divider mean something. A single scroller for both
+   axes would tie the two sides' horizontal position together and size the
+   whole grid to the widest line in the file. */
+.sideScroll { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; }
+.sideCols { display: flex; align-items: stretch; min-height: 100%; }
+/* `min-width: 0` is what lets a flex column be narrower than its content —
+   without it the column refuses to shrink and the divider stops moving. */
+.sideCol { flex: 0 0 auto; min-width: 0; overflow-x: auto; }
+.sideColRight { flex: 1 1 0; }
+.sideColGrid {
+  display: grid;
+  grid-template-columns: 3.2em 1fr;
+  align-content: start;
+  padding: 8px 0 16px;
+  min-width: 100%; width: max-content;
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  font-size: var(--gs-t-dense); line-height: 20px; font-weight: 400;
+  font-variant-ligatures: none;
+  font-feature-settings: 'liga' 0, 'calt' 0;
+  tab-size: 4;
+}
+/* The blame gutter, on the working-tree column only. Fixed width so the code
+   beside it does not shift line to line, and clipped rather than wrapped: a
+   gutter row that grew to two lines would break the alignment the whole
+   side-by-side view rests on. */
+.sideColGridBlame { grid-template-columns: 13em 3.2em 1fr; }
+.blameCell {
+  box-sizing: border-box;
+  padding: 0 8px 0 10px;
+  border-right: 1px solid var(--gs-border-soft);
+  color: var(--gs-fg-faint);
+  font-size: var(--gs-t-meta);
+  white-space: pre; overflow: hidden; text-overflow: ellipsis;
+  user-select: none;
+}
+.sideTabs {
+  z-index: 5;
+  display: flex; gap: 16px;
+  flex: none;
+  padding: 6px 16px 0;
+  border-bottom: 1px solid var(--gs-border-soft);
+  background: var(--gs-surface-2);
+}
+.sideTab {
+  position: relative;
+  padding: 2px 0 5px;
+  border: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: var(--gs-t-meta); line-height: 16px; font-weight: 500;
+  color: var(--gs-fg-dim);
+  cursor: pointer;
+}
+.sideTab::after {
+  content: '';
+  position: absolute; right: 0; bottom: 1px; left: 0;
+  height: 2px; border-radius: 2px;
+  background: transparent;
+}
+.sideTabActive { color: var(--gs-accent); }
+.sideTabActive::after { background: var(--gs-accent); }
+.sideNotice {
+  flex: none;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--gs-border-soft);
+  color: var(--gs-info);
+  font-size: var(--gs-t-dense);
+}
+.sideNum {
+  box-sizing: border-box;
+  padding: 0 8px;
+  text-align: right;
+  color: var(--gs-fg-fainter);
+  user-select: none;
+  font-variant-numeric: tabular-nums;
+}
+.sideNumAdd { background: var(--gs-add-num, var(--gs-add-line)); }
+.sideNumDel { background: var(--gs-del-num, var(--gs-del-line)); }
+.sideCode { white-space: pre; padding: 0 16px 0 10px; min-height: 20px; }
+.sideCodeSame { color: var(--gs-fg-muted); }
+.sideCodeAdd { background: var(--gs-add-line); }
+.sideCodeDel { background: var(--gs-del-line); }
+/* The block affordance: a changed row's cells carry the block tint above, and
+   the hovered block's every cell — code and gutter — takes the hot outline,
+   so the reader sees the unit the buttons act on rather than the one cell the
+   pointer happens to be over. `.sideCellBlock` also positions the action bar,
+   which a cell of the block's first row carries. */
+.sideCellBlock { position: relative; }
+.sideBlockHot { outline: 1px solid var(--gs-accent); outline-offset: -1px; }
+
+/* The hovered block's actions, floating on the row above the block. It lives
+   INSIDE the block's first code cell, so it travels with the column and the
+   scroll, and it only ever covers context — never the change it acts on. The
+   surface and shadow are what keep it readable over code. */
+.blockBar {
+  position: absolute; top: -21px; left: 0; z-index: 4;
+  display: flex; gap: 4px;
+  padding: 2px;
+  border: 1px solid var(--gs-border);
+  border-radius: var(--gs-r-control);
+  background: var(--gs-surface-2, var(--gs-bg));
+  box-shadow: 0 4px 14px var(--gs-shadow);
+  white-space: nowrap;
+}
+.blockBtn {
+  padding: 0 8px;
+  border: 1px solid var(--gs-border); border-radius: var(--gs-r-pill);
+  background: var(--gs-bg); color: var(--gs-fg-dim);
+  font-family: inherit; font-size: var(--gs-t-meta); line-height: 16px;
+  cursor: pointer;
+}
+.blockBtn:hover:not(:disabled) { color: var(--gs-fg); border-color: var(--gs-accent); }
+.blockBtn:disabled { opacity: 0.45; cursor: default; }
+/* The roll-back button stays red at rest, not only on hover: it is the one
+   action in the bar that cannot be undone, and arriving under the pointer is
+   not what should make that visible. */
+.blockBtnDanger { color: var(--gs-del); border-color: var(--gs-del-bg, var(--gs-border)); }
+.blockBtnDanger:hover:not(:disabled) { color: var(--gs-del); border-color: var(--gs-del); }
+
+/* The editable right column. The working-tree column is readable but visibly
+   a text surface before editing is armed; the tab row carries the arm/save
+   cluster at its right end. */
+.sideArmable { cursor: text; }
+
+/* An editable buffer says so — the one thing a rendered code pane cannot say
+   by itself.
+
+   Nothing about monospaced text on a background looks like a field. In the
+   Files tab the editor is live the moment the file opens, so without a mark
+   the reader finds out whether they may type by typing — and finds out they
+   may not the same way, on a pane that silently swallows it. The rule runs
+   the full height of the editor's leading edge: dim while nothing is focused
+   (present, not loud — it sits beside code someone came to read), full accent
+   once the caret is actually inside, which doubles as "this pane has the
+   keyboard".
+
+   Driven by an attribute the component sets from the same boolean that
+   configures `EditorState.readOnly`, so the rule cannot appear on a pane that
+   would refuse the keystroke. `pointer-events: none` because the bar overlays
+   the gutter's first two pixels, and a click there must still reach the
+   view. */
+.cmHost { position: relative; }
+.cmHost[data-editable]::before {
+  content: '';
+  position: absolute;
+  top: 0; bottom: 0; left: 0;
+  width: 2px;
+  border-radius: 1px;
+  background: var(--gs-accent);
+  opacity: 0.32;
+  transition: opacity 140ms ease;
+  pointer-events: none;
+}
+.cmHost[data-editable]:focus-within::before { opacity: 1; }
+/* The change nav takes the free space, so it and `.sideActions` after it sit
+   together at the right end. Only the FIRST auto margin absorbs anything —
+   the one on `.sideActions` then has nothing left to take, which is what
+   keeps the two groups adjacent rather than pushed to opposite ends. */
+.sideNav { margin-left: auto; display: flex; gap: 4px; align-items: center; padding: 2px 0 5px; }
+.sideNav .blockBtn { padding-inline: 6px; line-height: 0; }
+.sideNavCount { color: var(--gs-fg-faint); font-size: var(--gs-t-meta); white-space: nowrap; }
+.sideActions { margin-left: auto; display: flex; gap: 4px; align-items: flex-start; padding: 2px 0 5px; }
+/* Save gains the accent only once there is something to save: the button's
+   whole enabled state is the dirty flag, and colour says it sooner than the
+   pointer does. */
+.sideSaveReady { color: var(--gs-accent); border-color: var(--gs-accent); }
+
+/* The reload-or-overwrite banner (§4) and the failed-save banner: a warning
+   strip under the tabs carrying its own actions, so the decision it asks for
+   is one click away rather than a sentence away. */
+.sideBanner {
+  flex: none;
+  display: flex; flex-direction: column; gap: 6px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--gs-border-soft);
+  background: var(--gs-del-bg, transparent);
+  color: var(--gs-del);
+  font-size: var(--gs-t-dense);
+}
+.sideBannerTitle { font-weight: 600; }
+.sideBannerActs { display: flex; gap: 4px; }
+
+/* The editor grid item that positions the textarea. It spans exactly the
+   buffer's rows of the fourth column; the textarea fills it absolutely. */
+.sideEditCell { position: relative; }
+
+
 /* No syntax-tint classes here: Shiki resolves a real TextMate theme and emits a
    hex per token, so the panel writes colour inline. A four-class approximation
    painted identifiers, types and punctuation all one colour, which is what made
@@ -1827,7 +2113,7 @@
  * its own padding, radius and font-size, and the same "small secondary button"
  * had drifted to four heights and three radii across one screen.
  */
-.btn, .miniBtn, .treeIcon, .commitCopy, .scopeBtn, .refButton, .funnelButton, .funnelPreset {
+.btn, .miniBtn, .treeIcon, .commitCopy, .scopeBtn, .refButton, .funnelButton, .funnelPreset, .layoutButton {
   display: inline-flex; align-items: center; justify-content: center; gap: 6px;
   box-sizing: border-box;
   flex: none;
@@ -1845,14 +2131,14 @@
   transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
 }
 .btn:hover, .miniBtn:hover, .treeIcon:hover, .commitCopy:hover,
-.scopeBtn:hover, .refButton:hover, .funnelButton:hover, .funnelPreset:hover {
+.scopeBtn:hover, .refButton:hover, .funnelButton:hover, .funnelPreset:hover, .layoutButton:hover {
   background: var(--gs-raise);
   color: var(--gs-fg);
   border-color: var(--gs-fg-fainter);
 }
 .btn:focus-visible, .miniBtn:focus-visible, .treeIcon:focus-visible,
 .commitCopy:focus-visible, .scopeBtn:focus-visible, .refButton:focus-visible,
-.funnelPreset:focus-visible {
+.funnelPreset:focus-visible, .layoutButton:focus-visible {
   outline: 2px solid var(--gs-accent);
   outline-offset: 1px;
 }
@@ -1865,7 +2151,7 @@
 
 /* Pane tools give their vertical space back to the diff; the date presets sit
    inside a 320px popover, so they take the compact height too. */
-.treeIcon, .commitCopy, .funnelPreset {
+.treeIcon, .commitCopy, .funnelPreset, .layoutButton {
   height: var(--gs-h-compact);
   padding: var(--gs-pad-compact);
   font-size: var(--gs-t-dense);
@@ -1875,6 +2161,19 @@
    the pane drags down to, two more text buttons cannot share a row with the
    count — and these two are the pair a tree header always carries. */
 .treeIcon { width: var(--gs-h-compact); padding: 0; }
+/* The arrangement switch: two square icon buttons at the end of the commit
+   list's head, side by side with no gap so they read as one control. Icon-only
+   for the same reason the tree's are — the head already carries a title, a
+   funnel and a search box, and at the 190px the pane drags down to there is no
+   room for two more words. */
+/* Pushed to the far end of History's toolbar row, away from the ref picker:
+   one changes WHAT is listed, the other only where it is drawn. */
+.layoutSwitch { display: inline-flex; flex: none; gap: 2px; margin-left: auto; }
+.layoutButton { width: var(--gs-h-compact); padding: 0; }
+/* Qualified, like `.treeIconOn`: the shared vocabulary sets `color` at the
+   same specificity a few rules above. */
+.layoutButton.layoutButtonOn { color: var(--gs-accent); border-color: var(--gs-accent); }
+.layoutGlyph { display: block; }
 /* Qualified, like `.funnelButtonActive`: this sits inside the shared button
    vocabulary, which sets `color` at the same specificity a few lines above. */
 .treeIcon.treeIconOn { color: var(--gs-accent); border-color: var(--gs-accent); }
@@ -2027,3 +2326,183 @@
   font-weight: 600;
 }
 .btn.btnDanger:hover:not(:disabled) { border-color: var(--gs-del); background: var(--gs-del); color: var(--gs-on-accent, #fff); }
+
+/* Files tab: the repository browser's tree, and the pane that opens a file.
+   Modifier rules stay BELOW the base rule they narrow — a modifier declared
+   first loses the cascade, which the drawer-chrome test checks for. */
+.fbTree {
+  flex: none;
+  min-width: var(--gs-min-tree);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 6px;
+  overflow: auto;
+  background: var(--gs-surface-2);
+}
+.fbSearch {
+  flex: none;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 4px 6px;
+  font: inherit;
+  font-size: var(--gs-t-meta);
+  color: var(--gs-fg);
+  background: var(--gs-surface);
+  border: 1px solid var(--gs-border);
+  border-radius: 4px;
+}
+.fbSearch:focus { outline: none; border-color: var(--gs-accent); }
+.fbNote { flex: none; font-size: var(--gs-t-meta); color: var(--gs-fg-dim); padding: 2px 4px; }
+.fbList { list-style: none; margin: 0; padding: 0; }
+.fbRow {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+  padding: 2px 6px 2px 4px;
+  font: inherit;
+  font-size: var(--gs-t-dense);
+  color: var(--gs-fg-dim);
+  text-align: left;
+  background: none;
+  border: 0;
+  border-radius: 3px;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.fbRow:hover { background: var(--gs-hover); }
+.fbRowActive { background: var(--gs-selected); color: var(--gs-fg); }
+.fbDirName { overflow: hidden; text-overflow: ellipsis; }
+.fbFileName { overflow: hidden; text-overflow: ellipsis; }
+.fbMain {
+  flex: 1 1 0;
+  min-width: var(--gs-min-diff);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: var(--gs-surface);
+}
+.fbHeader {
+  flex: none;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 4px 8px 0;
+  border-bottom: 1px solid var(--gs-border);
+}
+.fbPath {
+  font-size: var(--gs-t-meta);
+  color: var(--gs-fg-dim);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 4px 0;
+}
+/* The editor scrolls inside this, so the header and the notices above stay
+   put — the same reason the side pane's toolbar is pinned. */
+.fbBody { flex: 1 1 0; min-height: 0; overflow: auto; padding: 4px 8px; }
+
+/* The commit behind the picked blame line. A strip rather than a floating
+   popup: it never covers the code it is about, and it survives a scroll. */
+.fbCommit {
+  flex: none;
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 4px 8px;
+  font-size: var(--gs-t-meta);
+  color: var(--gs-fg-dim);
+  background: var(--gs-surface-2);
+  border-bottom: 1px solid var(--gs-border);
+}
+.fbCommitLine { flex: none; color: var(--gs-fg-faint); font-variant-numeric: tabular-nums; }
+.fbCommitWho { flex: none; color: var(--gs-fg); font-weight: 600; }
+.fbCommitWhen { flex: none; font-variant-numeric: tabular-nums; }
+.fbCommitHash { flex: none; font-family: inherit; color: var(--gs-fg-faint); }
+.fbCommitWhat {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--gs-fg);
+}
+.fbCommitHint { color: var(--gs-fg-faint); }
+.fbMore {
+  display: block;
+  padding: 2px 6px 4px 4px;
+  font-size: var(--gs-t-meta);
+  color: var(--gs-fg-faint);
+  font-style: italic;
+}
+
+/* ============================ image preview ============================= */
+
+/* A picture fills the pane and its facts sit under it, because the facts are
+   the reason this is a viewer rather than an image tag: a screenshot in a
+   repository is usually opened to check a size or a crop. */
+.imgPane {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+  gap: 8px;
+}
+
+/* The checkerboard is not decoration. A transparent PNG on a flat background
+   is indistinguishable from an opaque one of that colour, and "is this
+   transparent" is the question the file was opened to answer. Two overlaid
+   gradients rather than an asset: no request, and it takes the theme. */
+.imgStage {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: auto;
+  padding: 12px;
+  border-radius: var(--gs-r-control);
+  background-color: var(--gs-surface-2);
+  background-image:
+    linear-gradient(45deg, var(--gs-border-soft) 25%, transparent 25%, transparent 75%, var(--gs-border-soft) 75%),
+    linear-gradient(45deg, var(--gs-border-soft) 25%, transparent 25%, transparent 75%, var(--gs-border-soft) 75%);
+  background-size: 16px 16px;
+  background-position: 0 0, 8px 8px;
+}
+
+/* Fit is the default: an 8000px render opened at full size shows its top-left
+   corner, which looks like a broken image rather than a big one. */
+.imgShot {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  /* Nearest-neighbour would be right for icons and wrong for photographs, and
+     the pane cannot tell them apart; smooth is the safe half of that trade. */
+  image-rendering: auto;
+}
+
+/* Actual size: the scaling comes off and the stage scrolls instead. Written
+   as a descendant of the stage's own state so the picture keeps ONE class,
+   and the two views cannot disagree about which is in force. */
+.imgStage[data-actual] {
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+.imgStage[data-actual] .imgShot {
+  max-width: none;
+  max-height: none;
+  object-fit: none;
+}
+
+.imgCaption {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: var(--gs-t-meta);
+  color: var(--gs-fg-dim);
+  font-variant-numeric: tabular-nums;
+}