From b9cc7d476a6cd62d16f9e3d44ac2bc78130835ff Mon Sep 17 00:00:00 2001 From: Dean Stratakos <29683763+dastratakos@users.noreply.github.com> Date: Mon, 19 Oct 2026 12:17:48 +0000 Subject: [PATCH 1/3] style(desktop): draw Files changed's unmodified-lines band as one surface Pierre filled the band's row with the code's ground and its arrows and words with the band's, so they read as a box pasted onto a strip. The row now takes the band's ground across the card, the arrows and words stand on it with no ground of their own, and only an arrow answers the pointer. Co-authored-by: luke-agent[bot] <339870089+luke-agent[bot]@users.noreply.github.com> --- packages/panel/src/diff-view/index.ts | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/packages/panel/src/diff-view/index.ts b/packages/panel/src/diff-view/index.ts index 08c0f02cb1..5d7236bb18 100644 --- a/packages/panel/src/diff-view/index.ts +++ b/packages/panel/src/diff-view/index.ts @@ -189,6 +189,26 @@ const LOOK_CSS = ` [data-utility-button] { margin-right: 0; } + /* A band between hunks is one surface across its width: Pierre fills + the band's row with the code's ground and its arrows and its words + with the band's, a box pasted onto a strip. Its row takes the band's + ground, the arrows and the words stand on it with no ground of their + own, and only an arrow answers the pointer; the words are words. */ + [data-separator="line-info-basic"] [data-separator-wrapper] { + /* Pierre's own band ground, which a list sets (LIST_CSS). */ + background-color: var(--diffs-bg-separator, var(--luke-color-fill-hover)); + } + [data-separator="line-info-basic"] [data-expand-button], + [data-separator="line-info-basic"] [data-separator-content] { + background-color: transparent; + border: 0; + } + [data-separator="line-info-basic"] [data-expand-button]:hover { + background-color: var(--luke-color-fill-pressed); + } + [data-separator="line-info-basic"] [data-separator-content] { + pointer-events: none; + } /* Lines lit, a comment's or a thread's, light their own rows alone: a note under them, the comment being written or a thread, keeps its own ground rather than standing in the band. */ From a93a986d7c6210be0487311cf3c8370db9cb922a Mon Sep 17 00:00:00 2001 From: Dean Stratakos <29683763+dastratakos@users.noreply.github.com> Date: Mon, 19 Oct 2026 12:33:30 +0000 Subject: [PATCH 2/3] style(desktop): the unmodified-lines label opens what its arrow opens The label stays a target, a bigger one than the arrow: it lets the pointer through to the arrow, whose press now runs the band's width, so it opens the arrow's lines rather than both ends of a gap. Hovering the band lifts the label's ink; the fill stays on the arrow. Co-authored-by: luke-agent[bot] <339870089+luke-agent[bot]@users.noreply.github.com> --- packages/panel/src/diff-view/index.ts | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/packages/panel/src/diff-view/index.ts b/packages/panel/src/diff-view/index.ts index 5d7236bb18..724ff24fcf 100644 --- a/packages/panel/src/diff-view/index.ts +++ b/packages/panel/src/diff-view/index.ts @@ -193,7 +193,8 @@ const LOOK_CSS = ` the band's row with the code's ground and its arrows and its words with the band's, a box pasted onto a strip. Its row takes the band's ground, the arrows and the words stand on it with no ground of their - own, and only an arrow answers the pointer; the words are words. */ + own, and only the arrow fills under the pointer; the words, a bigger + target opening the same lines, lift their ink. */ [data-separator="line-info-basic"] [data-separator-wrapper] { /* Pierre's own band ground, which a list sets (LIST_CSS). */ background-color: var(--diffs-bg-separator, var(--luke-color-fill-hover)); @@ -206,9 +207,26 @@ const LOOK_CSS = ` [data-separator="line-info-basic"] [data-expand-button]:hover { background-color: var(--luke-color-fill-pressed); } + /* The words open what the arrow opens: Pierre opens a gap's both ends + from its words, which at the file's top or foot is not the arrow's, so + the words let the pointer through to the arrow, whose press reaches + across the band. */ [data-separator="line-info-basic"] [data-separator-content] { pointer-events: none; } + [data-separator="line-info-basic"] [data-separator-wrapper]:not([data-separator-multi-button]) + [data-expand-button]::after { + content: ""; + position: absolute; + inset-block: 0; + inset-inline-start: 0; + /* The arrow's column stands in the gutter alone, its words running on + past it over the code, so its press runs the file's width. */ + width: 100cqi; + } + [data-separator="line-info-basic"] [data-separator-wrapper]:hover [data-separator-content] { + color: var(--luke-color-text-muted); + } /* Lines lit, a comment's or a thread's, light their own rows alone: a note under them, the comment being written or a thread, keeps its own ground rather than standing in the band. */ From 51c6e1da52dfb8c861ce3207703a510e857bd325 Mon Sep 17 00:00:00 2001 From: Dean Stratakos <29683763+dastratakos@users.noreply.github.com> Date: Mon, 19 Oct 2026 12:37:18 +0000 Subject: [PATCH 3/3] fix(desktop): a two-arrow gap's label keeps its own press Co-authored-by: luke-agent[bot] <339870089+luke-agent[bot]@users.noreply.github.com> --- packages/panel/src/diff-view/index.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/panel/src/diff-view/index.ts b/packages/panel/src/diff-view/index.ts index 724ff24fcf..fa261b0a7a 100644 --- a/packages/panel/src/diff-view/index.ts +++ b/packages/panel/src/diff-view/index.ts @@ -210,8 +210,10 @@ const LOOK_CSS = ` /* The words open what the arrow opens: Pierre opens a gap's both ends from its words, which at the file's top or foot is not the arrow's, so the words let the pointer through to the arrow, whose press reaches - across the band. */ - [data-separator="line-info-basic"] [data-separator-content] { + across the band. A gap of two arrows keeps its words' own press, + which opens both of its ends, so neither arrow is covered. */ + [data-separator="line-info-basic"] [data-separator-wrapper]:not([data-separator-multi-button]) + [data-separator-content] { pointer-events: none; } [data-separator="line-info-basic"] [data-separator-wrapper]:not([data-separator-multi-button])