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);