From 660462dc6783bc089f8d5b7ffe6a9c44b5befdc6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20Hermes?= Date: Fri, 23 Oct 2026 07:39:47 +0200 Subject: [PATCH] Give both versions the same text width so unchanged paragraphs wrap identically Side by side, the new version's text column was up to 42px narrower than the old one: only the right clauses reserved the review gutter, only the right pane showed a scrollbar, and its divider took 1px. Unchanged paragraphs therefore wrapped differently on the two sides. Both sides now reserve the same gutter and scrollbar space (invisible on the left), and the divider is drawn without taking up width. A check in check.mjs guards these rules. Co-Authored-By: Claude Opus 5.5 --- DocDiff.html | 16 ++++++++++++---- scripts/check.mjs | 10 ++++++++++ site/en/index.html | 16 ++++++++++++---- site/index.html | 16 ++++++++++++---- src/styles.css | 16 ++++++++++++---- 5 files changed, 58 insertions(+), 16 deletions(-) diff --git a/DocDiff.html b/DocDiff.html index 8dff029..655eced 100644 --- a/DocDiff.html +++ b/DocDiff.html @@ -1496,16 +1496,23 @@ scrollbar-width: thin; scrollbar-color: hsl(var(--input)) transparent; } +/* Both versions get exactly the same text width, so unchanged paragraphs wrap identically: + the left pane keeps an invisible scrollbar of the same width (it scrolls in sync with the + right one), and the divider is drawn without taking up space. */ +.doc-pane-left, +.doc-pane-right { + scrollbar-gutter: stable; +} .doc-pane-left { padding-right: var(--sp-4); - scrollbar-width: none; + scrollbar-color: transparent transparent; } -.doc-pane-left::-webkit-scrollbar { - display: none; +.doc-pane-left::-webkit-scrollbar-thumb { + background: transparent; } .doc-pane-right { padding-left: var(--sp-4); - border-left: 1px solid hsl(var(--border)); + box-shadow: inset 1px 0 0 hsl(var(--border)); } .doc-pane:focus-visible, .doc-pane-unified:focus-visible { @@ -1902,6 +1909,7 @@ --rv-gutter: 54px; } } +#sheet-left .clause, #sheet-right .clause, #sheet-unified .clause { padding-right: var(--rv-gutter); diff --git a/scripts/check.mjs b/scripts/check.mjs index 7a461df..8a1ed3c 100755 --- a/scripts/check.mjs +++ b/scripts/check.mjs @@ -130,6 +130,16 @@ for (const doc of ['README.md', 'SECURITY.md']) { assert.ok(appJsCode.includes('isEvalSupported: false'), 'PDF.js getDocument() must pass isEvalSupported: false'); // 5. Verify site legal and domain files for docdiff.app +// Side by side, both versions must have exactly the same text width, or unchanged paragraphs +// wrap differently: same right gutter for clauses, same scrollbar gutter, no space-taking divider. +{ + const css = fs.readFileSync(path.join(root, 'src', 'styles.css'), 'utf8'); + const rule = sel => (css.match(new RegExp(`(^|\\n)${sel.replace(/[.#]/g, '\\$&')} \\{([^}]*)\\}`)) || [])[2] || ''; + assert.match(css, /#sheet-left \.clause,\s*#sheet-right \.clause,\s*#sheet-unified \.clause \{\s*padding-right: var\(--rv-gutter\);/, 'left and right clauses share the review gutter'); + assert.match(css, /\.doc-pane-left,\s*\.doc-pane-right \{\s*scrollbar-gutter: stable;/, 'both panes reserve the same scrollbar gutter'); + assert.ok(!/scrollbar-width: none|border-(left|right)/.test(rule('.doc-pane-left') + rule('.doc-pane-right')), 'no hidden scrollbar or border that narrows one pane'); +} + for (const siteFile of ['CNAME', 'og-image.png', 'og-image-en.png', 'impressum.html', 'datenschutz.html', 'legal.css', 'robots.txt', 'sitemap.xml', '.nojekyll']) { const p = path.join(root, 'site', siteFile); assert.ok(fs.existsSync(p), `Missing required site file: site/${siteFile}`); diff --git a/site/en/index.html b/site/en/index.html index 644c2ff..64dec7e 100644 --- a/site/en/index.html +++ b/site/en/index.html @@ -1499,16 +1499,23 @@ scrollbar-width: thin; scrollbar-color: hsl(var(--input)) transparent; } +/* Both versions get exactly the same text width, so unchanged paragraphs wrap identically: + the left pane keeps an invisible scrollbar of the same width (it scrolls in sync with the + right one), and the divider is drawn without taking up space. */ +.doc-pane-left, +.doc-pane-right { + scrollbar-gutter: stable; +} .doc-pane-left { padding-right: var(--sp-4); - scrollbar-width: none; + scrollbar-color: transparent transparent; } -.doc-pane-left::-webkit-scrollbar { - display: none; +.doc-pane-left::-webkit-scrollbar-thumb { + background: transparent; } .doc-pane-right { padding-left: var(--sp-4); - border-left: 1px solid hsl(var(--border)); + box-shadow: inset 1px 0 0 hsl(var(--border)); } .doc-pane:focus-visible, .doc-pane-unified:focus-visible { @@ -1905,6 +1912,7 @@ --rv-gutter: 54px; } } +#sheet-left .clause, #sheet-right .clause, #sheet-unified .clause { padding-right: var(--rv-gutter); diff --git a/site/index.html b/site/index.html index 13c8e5c..240930c 100644 --- a/site/index.html +++ b/site/index.html @@ -1499,16 +1499,23 @@ scrollbar-width: thin; scrollbar-color: hsl(var(--input)) transparent; } +/* Both versions get exactly the same text width, so unchanged paragraphs wrap identically: + the left pane keeps an invisible scrollbar of the same width (it scrolls in sync with the + right one), and the divider is drawn without taking up space. */ +.doc-pane-left, +.doc-pane-right { + scrollbar-gutter: stable; +} .doc-pane-left { padding-right: var(--sp-4); - scrollbar-width: none; + scrollbar-color: transparent transparent; } -.doc-pane-left::-webkit-scrollbar { - display: none; +.doc-pane-left::-webkit-scrollbar-thumb { + background: transparent; } .doc-pane-right { padding-left: var(--sp-4); - border-left: 1px solid hsl(var(--border)); + box-shadow: inset 1px 0 0 hsl(var(--border)); } .doc-pane:focus-visible, .doc-pane-unified:focus-visible { @@ -1905,6 +1912,7 @@ --rv-gutter: 54px; } } +#sheet-left .clause, #sheet-right .clause, #sheet-unified .clause { padding-right: var(--rv-gutter); diff --git a/src/styles.css b/src/styles.css index e7b6c2b..f9bdffe 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1321,16 +1321,23 @@ body:not(.view-inline) #pane-unified { scrollbar-width: thin; scrollbar-color: hsl(var(--input)) transparent; } +/* Both versions get exactly the same text width, so unchanged paragraphs wrap identically: + the left pane keeps an invisible scrollbar of the same width (it scrolls in sync with the + right one), and the divider is drawn without taking up space. */ +.doc-pane-left, +.doc-pane-right { + scrollbar-gutter: stable; +} .doc-pane-left { padding-right: var(--sp-4); - scrollbar-width: none; + scrollbar-color: transparent transparent; } -.doc-pane-left::-webkit-scrollbar { - display: none; +.doc-pane-left::-webkit-scrollbar-thumb { + background: transparent; } .doc-pane-right { padding-left: var(--sp-4); - border-left: 1px solid hsl(var(--border)); + box-shadow: inset 1px 0 0 hsl(var(--border)); } .doc-pane:focus-visible, .doc-pane-unified:focus-visible { @@ -1727,6 +1734,7 @@ ins.tok-ins.tok-marker { --rv-gutter: 54px; } } +#sheet-left .clause, #sheet-right .clause, #sheet-unified .clause { padding-right: var(--rv-gutter);