[OCaml] Mobile-friendly clone of cgit.
style use one grid per hunk for consistent diff column alignment
Move display: grid from .diff-line to a new .diff-lines container (one per hunk). Each .diff-line becomes display: contents so its children (line numbers, marker, text) participate in the shared hunk-level grid. This synchronizes column widths across all lines in a hunk regardless of content length. Move addition/deletion backgrounds to child cells since display: contents elements cannot render backgrounds.
Changed files
lib/static/styles.css
@@ -470,13 +470,17 @@
470
470
content: "";
471
471
}
472
472
473
Removed:
.diff-line {
473
Added:
.diff-lines {
474
474
display: grid;
475
475
grid-template-columns: 4em 4em 1.25em minmax(max-content, 1fr);
476
Removed:
min-height: 1.35em;
477
476
font-family: monospace;
477
Added:
grid-auto-rows: minmax(1.35em, auto);
478
478
}
479
479
480
Added:
.diff-line {
481
Added:
display: contents;
482
Added:
}
483
Added:
480
484
.diff-line .line-number {
481
485
padding-right: 0.6em;
482
486
color: #999;
@@ -495,11 +499,11 @@
495
499
white-space: pre;
496
500
}
497
501
498
Removed:
.diff-line.addition {
502
Added:
.diff-line.addition > * {
499
503
background: #17351f;
500
504
}
501
505
502
Removed:
.diff-line.deletion {
506
Added:
.diff-line.deletion > * {
503
507
background: #3b1d1d;
504
508
}
505
509
lib/views/repo.ml
@@ -234,13 +234,15 @@
234
234
[
235
235
details
236
236
[ class_ "diff-hunk"; open_ ]
237
Removed:
(summary
238
Removed:
[ class_ "hunk-header" ]
239
Removed:
[
240
Removed:
txt "@@ -%d,%d +%d,%d @@" hunk.old_start hunk.old_count
241
Removed:
hunk.new_start hunk.new_count;
242
Removed:
]
243
Removed:
:: List.map line hunk.lines);
237
Added:
[
238
Added:
summary
239
Added:
[ class_ "hunk-header" ]
240
Added:
[
241
Added:
txt "@@ -%d,%d +%d,%d @@" hunk.old_start hunk.old_count
242
Added:
hunk.new_start hunk.new_count;
243
Added:
];
244
Added:
div [ class_ "diff-lines" ] (List.map line hunk.lines);
245
Added:
];
244
246
]
245
247
in
246
248
let mode = function