[OCaml] Mobile-friendly clone of cgit.
fix align mobile commit diff columns
Wrap each hunk grid in a dedicated horizontal scroll container so long lines scroll together rather than overflowing individual cells. Keep both line-number columns and the content column vertically aligned at every viewport width.
Changed files
lib/static/styles.css
@@ -684,7 +684,7 @@
684
684
margin: 1.5em 0;
685
685
border: 1px solid #3a3a3a;
686
686
border-radius: 0.25rem;
687
Removed:
overflow-x: auto;
687
Added:
overflow: hidden;
688
688
}
689
689
690
690
.diff-hunk {
@@ -733,12 +733,19 @@
733
733
content: "";
734
734
}
735
735
736
Added:
.diff-lines-scroll {
737
Added:
max-width: 100%;
738
Added:
overflow-x: auto;
739
Added:
overscroll-behavior-inline: contain;
740
Added:
}
741
Added:
736
742
.diff-lines {
737
743
display: grid;
738
Removed:
grid-template-columns: max-content max-content max-content auto;
744
Added:
width: max-content;
745
Added:
min-width: 100%;
746
Added:
grid-template-columns: max-content max-content max-content minmax(max-content, 1fr);
739
747
font-family: monospace;
740
748
grid-auto-rows: minmax(1.35em, auto);
741
Removed:
overflow-x: auto;
742
749
}
743
750
744
751
.diff-line {
@@ -853,15 +860,7 @@
853
860
font-size: 0.85em;
854
861
}
855
862
856
Removed:
.diff-line {
857
Removed:
grid-template-columns: 3em 1.25em minmax(max-content, 1fr);
858
Removed:
}
859
Removed:
860
Removed:
.diff-line .line-number:first-child {
861
Removed:
display: none;
862
Removed:
}
863
Removed:
864
Removed:
.diff-line {
863
Added:
.diff-lines {
865
864
font-size: 0.85em;
866
865
}
867
866
}
lib/views/repo.ml
@@ -430,7 +430,9 @@
430
430
txt "@@ -%d,%d +%d,%d @@" hunk.old_start hunk.old_count
431
431
hunk.new_start hunk.new_count;
432
432
];
433
Removed:
div [ class_ "diff-lines" ] (List.map line hunk.lines);
433
Added:
div
434
Added:
[ class_ "diff-lines-scroll" ]
435
Added:
[ div [ class_ "diff-lines" ] (List.map line hunk.lines) ];
434
436
];
435
437
]
436
438
in