forces its two | s to the SAME
height automatically — the browser guarantees it — so rows can NEVER desync
no matter how long or how many lines one side wraps to. This finally kills
BOTH the old "misaligned from record X" bug AND the "scrollbar on every long
row" bug. */
.diff-scroll-wrapper {
flex: 1;
min-height: 0;
overflow-y: auto; /* ONE vertical scrollbar for the whole table */
overflow-x: hidden; /* long lines wrap, so no horizontal scrollbar */
background: #fafbfc;
}
.diff-table {
table-layout: fixed; /* col widths come from , NOT content — a
long line can't stretch the column (or the
neighbour) wider, so both columns stay visible */
width: 100%;
border-collapse: collapse;
}
.diff-table col.diff-col-left { width: calc(var(--diff-split) * 100%); }
.diff-table col.diff-col-right { width: calc((1 - var(--diff-split)) * 100%); }
.diff-table thead th {
position: sticky;
top: 0;
z-index: 2;
background: var(--code-bg);
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.3px;
text-align: center;
padding: 6px 14px;
border-bottom: 1px solid var(--border-color);
}
/* Each | holds its line directly. Long JSON lines WRAP within the column
(white-space:pre-wrap + word-break:break-all) so the entire content is always
visible with no per-row horizontal scrollbar. The row's two | s are forced
to equal height by the |