Skip to content

Identical text width and line breaks in the side-by-side view #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tschnorpfeil merged 1 commit into from
Oct 23, 2026
Merged

Identical text width and line breaks in the side-by-side view #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 12 additions & 4 deletions DocDiff.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -1902,6 +1909,7 @@
--rv-gutter: 54px;
}
}
#sheet-left .clause,
#sheet-right .clause,
#sheet-unified .clause {
padding-right: var(--rv-gutter);
Expand Down
10 changes: 10 additions & 0 deletions scripts/check.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}`);
Expand Down
16 changes: 12 additions & 4 deletions site/en/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -1905,6 +1912,7 @@
--rv-gutter: 54px;
}
}
#sheet-left .clause,
#sheet-right .clause,
#sheet-unified .clause {
padding-right: var(--rv-gutter);
Expand Down
16 changes: 12 additions & 4 deletions site/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -1905,6 +1912,7 @@
--rv-gutter: 54px;
}
}
#sheet-left .clause,
#sheet-right .clause,
#sheet-unified .clause {
padding-right: var(--rv-gutter);
Expand Down
16 changes: 12 additions & 4 deletions src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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);
Expand Down
Loading