detached e84f160

fix(web): size split diff columns from a colgroup and wrap long lines

commit
e84f160db4eada9fdd7ce1ed1aadcc5dfa24e76c
author
brice · · 2026-10-11 12:42 UTC
parent
bcc3a12
signature
GPG VerifiedCD88F9E564E0102646FB6077A1A07C7C7C3E349D · arch-gpg Verified for the committer email
9 files · +88 -8
Unified
UnifiedSplit
M cmd/ermite/testdata/web/commit-merge.html +8 -0
@@ -131,6 +131,14 @@
131131 </tbody>
132132 </table>
133133 <table class="dt spl" aria-label="side.txt, split">
134+<colgroup>
135+<col class="c-ln">
136+<col class="c-m">
137+<col>
138+<col class="c-ln">
139+<col class="c-m">
140+<col>
141+</colgroup>
134142 <tbody>
135143 <tr class="hunk">
136144 <td colspan="6">@@ -0,0 +1,1 @@</td>
@@ -131,6 +131,14 @@
131 </tbody>131 </tbody>
132 </table>132 </table>
133 <table class="dt spl" aria-label="side.txt, split">133 <table class="dt spl" aria-label="side.txt, split">
134+<colgroup>
135+<col class="c-ln">
136+<col class="c-m">
137+<col>
138+<col class="c-ln">
139+<col class="c-m">
140+<col>
141+</colgroup>
134 <tbody>142 <tbody>
135 <tr class="hunk">143 <tr class="hunk">
136 <td colspan="6">@@ -0,0 +1,1 @@</td>144 <td colspan="6">@@ -0,0 +1,1 @@</td>
M cmd/ermite/testdata/web/commit-modify-split.html +8 -0
@@ -180,6 +180,14 @@ And &lt;b&gt;html&lt;/b&gt; &amp; &#34;quotes&#34;.</pre>
180180 </tbody>
181181 </table>
182182 <table class="dt spl" aria-label="a.txt, split">
183+<colgroup>
184+<col class="c-ln">
185+<col class="c-m">
186+<col>
187+<col class="c-ln">
188+<col class="c-m">
189+<col>
190+</colgroup>
183191 <tbody>
184192 <tr class="hunk">
185193 <td colspan="6">@@ -1,5 +1,6 @@</td>
@@ -180,6 +180,14 @@ And &lt;b&gt;html&lt;/b&gt; &amp; &#34;quotes&#34;.</pre>
180 </tbody>180 </tbody>
181 </table>181 </table>
182 <table class="dt spl" aria-label="a.txt, split">182 <table class="dt spl" aria-label="a.txt, split">
183+<colgroup>
184+<col class="c-ln">
185+<col class="c-m">
186+<col>
187+<col class="c-ln">
188+<col class="c-m">
189+<col>
190+</colgroup>
183 <tbody>191 <tbody>
184 <tr class="hunk">192 <tr class="hunk">
185 <td colspan="6">@@ -1,5 +1,6 @@</td>193 <td colspan="6">@@ -1,5 +1,6 @@</td>
M cmd/ermite/testdata/web/commit-modify.html +8 -0
@@ -180,6 +180,14 @@ And &lt;b&gt;html&lt;/b&gt; &amp; &#34;quotes&#34;.</pre>
180180 </tbody>
181181 </table>
182182 <table class="dt spl" aria-label="a.txt, split">
183+<colgroup>
184+<col class="c-ln">
185+<col class="c-m">
186+<col>
187+<col class="c-ln">
188+<col class="c-m">
189+<col>
190+</colgroup>
183191 <tbody>
184192 <tr class="hunk">
185193 <td colspan="6">@@ -1,5 +1,6 @@</td>
@@ -180,6 +180,14 @@ And &lt;b&gt;html&lt;/b&gt; &amp; &#34;quotes&#34;.</pre>
180 </tbody>180 </tbody>
181 </table>181 </table>
182 <table class="dt spl" aria-label="a.txt, split">182 <table class="dt spl" aria-label="a.txt, split">
183+<colgroup>
184+<col class="c-ln">
185+<col class="c-m">
186+<col>
187+<col class="c-ln">
188+<col class="c-m">
189+<col>
190+</colgroup>
183 <tbody>191 <tbody>
184 <tr class="hunk">192 <tr class="hunk">
185 <td colspan="6">@@ -1,5 +1,6 @@</td>193 <td colspan="6">@@ -1,5 +1,6 @@</td>
M cmd/ermite/testdata/web/commit-rename.html +8 -0
@@ -142,6 +142,14 @@
142142 </tbody>
143143 </table>
144144 <table class="dt spl" aria-label="gone.txt, split">
145+<colgroup>
146+<col class="c-ln">
147+<col class="c-m">
148+<col>
149+<col class="c-ln">
150+<col class="c-m">
151+<col>
152+</colgroup>
145153 <tbody>
146154 <tr class="hunk">
147155 <td colspan="6">@@ -1,1 +0,0 @@</td>
@@ -142,6 +142,14 @@
142 </tbody>142 </tbody>
143 </table>143 </table>
144 <table class="dt spl" aria-label="gone.txt, split">144 <table class="dt spl" aria-label="gone.txt, split">
145+<colgroup>
146+<col class="c-ln">
147+<col class="c-m">
148+<col>
149+<col class="c-ln">
150+<col class="c-m">
151+<col>
152+</colgroup>
145 <tbody>153 <tbody>
146 <tr class="hunk">154 <tr class="hunk">
147 <td colspan="6">@@ -1,1 +0,0 @@</td>155 <td colspan="6">@@ -1,1 +0,0 @@</td>
M cmd/ermite/testdata/web/commit-root.html +32 -0
@@ -158,6 +158,14 @@
158158 </tbody>
159159 </table>
160160 <table class="dt spl" aria-label="a.txt, split">
161+<colgroup>
162+<col class="c-ln">
163+<col class="c-m">
164+<col>
165+<col class="c-ln">
166+<col class="c-m">
167+<col>
168+</colgroup>
161169 <tbody>
162170 <tr class="hunk">
163171 <td colspan="6">@@ -0,0 +1,5 @@</td>
@@ -244,6 +252,14 @@
244252 </tbody>
245253 </table>
246254 <table class="dt spl" aria-label="gone.txt, split">
255+<colgroup>
256+<col class="c-ln">
257+<col class="c-m">
258+<col>
259+<col class="c-ln">
260+<col class="c-m">
261+<col>
262+</colgroup>
247263 <tbody>
248264 <tr class="hunk">
249265 <td colspan="6">@@ -0,0 +1,1 @@</td>
@@ -310,6 +326,14 @@
310326 </tbody>
311327 </table>
312328 <table class="dt spl" aria-label="old.txt, split">
329+<colgroup>
330+<col class="c-ln">
331+<col class="c-m">
332+<col>
333+<col class="c-ln">
334+<col class="c-m">
335+<col>
336+</colgroup>
313337 <tbody>
314338 <tr class="hunk">
315339 <td colspan="6">@@ -0,0 +1,3 @@</td>
@@ -381,6 +405,14 @@
381405 </tbody>
382406 </table>
383407 <table class="dt spl" aria-label="run.sh, split">
408+<colgroup>
409+<col class="c-ln">
410+<col class="c-m">
411+<col>
412+<col class="c-ln">
413+<col class="c-m">
414+<col>
415+</colgroup>
384416 <tbody>
385417 <tr class="hunk">
386418 <td colspan="6">@@ -0,0 +1,2 @@</td>
@@ -158,6 +158,14 @@
158 </tbody>158 </tbody>
159 </table>159 </table>
160 <table class="dt spl" aria-label="a.txt, split">160 <table class="dt spl" aria-label="a.txt, split">
161+<colgroup>
162+<col class="c-ln">
163+<col class="c-m">
164+<col>
165+<col class="c-ln">
166+<col class="c-m">
167+<col>
168+</colgroup>
161 <tbody>169 <tbody>
162 <tr class="hunk">170 <tr class="hunk">
163 <td colspan="6">@@ -0,0 +1,5 @@</td>171 <td colspan="6">@@ -0,0 +1,5 @@</td>
@@ -244,6 +252,14 @@
244 </tbody>252 </tbody>
245 </table>253 </table>
246 <table class="dt spl" aria-label="gone.txt, split">254 <table class="dt spl" aria-label="gone.txt, split">
255+<colgroup>
256+<col class="c-ln">
257+<col class="c-m">
258+<col>
259+<col class="c-ln">
260+<col class="c-m">
261+<col>
262+</colgroup>
247 <tbody>263 <tbody>
248 <tr class="hunk">264 <tr class="hunk">
249 <td colspan="6">@@ -0,0 +1,1 @@</td>265 <td colspan="6">@@ -0,0 +1,1 @@</td>
@@ -310,6 +326,14 @@
310 </tbody>326 </tbody>
311 </table>327 </table>
312 <table class="dt spl" aria-label="old.txt, split">328 <table class="dt spl" aria-label="old.txt, split">
329+<colgroup>
330+<col class="c-ln">
331+<col class="c-m">
332+<col>
333+<col class="c-ln">
334+<col class="c-m">
335+<col>
336+</colgroup>
313 <tbody>337 <tbody>
314 <tr class="hunk">338 <tr class="hunk">
315 <td colspan="6">@@ -0,0 +1,3 @@</td>339 <td colspan="6">@@ -0,0 +1,3 @@</td>
@@ -381,6 +405,14 @@
381 </tbody>405 </tbody>
382 </table>406 </table>
383 <table class="dt spl" aria-label="run.sh, split">407 <table class="dt spl" aria-label="run.sh, split">
408+<colgroup>
409+<col class="c-ln">
410+<col class="c-m">
411+<col>
412+<col class="c-ln">
413+<col class="c-m">
414+<col>
415+</colgroup>
384 <tbody>416 <tbody>
385 <tr class="hunk">417 <tr class="hunk">
386 <td colspan="6">@@ -0,0 +1,2 @@</td>418 <td colspan="6">@@ -0,0 +1,2 @@</td>
M cmd/ermite/testdata/web/commit-trojan.html +8 -0
@@ -186,6 +186,14 @@
186186 </tbody>
187187 </table>
188188 <table class="dt spl" aria-label="evil.go, split">
189+<colgroup>
190+<col class="c-ln">
191+<col class="c-m">
192+<col>
193+<col class="c-ln">
194+<col class="c-m">
195+<col>
196+</colgroup>
189197 <tbody>
190198 <tr class="hunk">
191199 <td colspan="6">@@ -0,0 +1,8 @@</td>
@@ -186,6 +186,14 @@
186 </tbody>186 </tbody>
187 </table>187 </table>
188 <table class="dt spl" aria-label="evil.go, split">188 <table class="dt spl" aria-label="evil.go, split">
189+<colgroup>
190+<col class="c-ln">
191+<col class="c-m">
192+<col>
193+<col class="c-ln">
194+<col class="c-m">
195+<col>
196+</colgroup>
189 <tbody>197 <tbody>
190 <tr class="hunk">198 <tr class="hunk">
191 <td colspan="6">@@ -0,0 +1,8 @@</td>199 <td colspan="6">@@ -0,0 +1,8 @@</td>
M internal/adapters/web/diff.templ +1 -0
@@ -193,6 +193,7 @@ templ DiffFileView(f DiffFile, p DiffView) {
193193 }
194194 if p.ShowSplit {
195195 <table class="dt spl" aria-label={ f.Path + ", split" }>
196+ <colgroup><col class="c-ln"/><col class="c-m"/><col/><col class="c-ln"/><col class="c-m"/><col/></colgroup>
196197 for _, h := range f.Hunks {
197198 <tbody>
198199 <tr class="hunk"><td colspan="6">{ h.Header }</td></tr>
@@ -193,6 +193,7 @@ templ DiffFileView(f DiffFile, p DiffView) {
193 }193 }
194 if p.ShowSplit {194 if p.ShowSplit {
195 <table class="dt spl" aria-label={ f.Path + ", split" }>195 <table class="dt spl" aria-label={ f.Path + ", split" }>
196+ <colgroup><col class="c-ln"/><col class="c-m"/><col/><col class="c-ln"/><col class="c-m"/><col/></colgroup>
196 for _, h := range f.Hunks {197 for _, h := range f.Hunks {
197 <tbody>198 <tbody>
198 <tr class="hunk"><td colspan="6">{ h.Header }</td></tr>199 <tr class="hunk"><td colspan="6">{ h.Header }</td></tr>
M internal/adapters/web/diff_templ.go +7 -7 generated file: collapsed
load diff
M internal/adapters/web/static/css/50-code.css +8 -1
@@ -79,7 +79,14 @@
7979 & .none { background: var(--paper-alt); }
8080 }
8181 .dscroll { overflow-x: auto; background: var(--bg-surface); border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--r) var(--r); }
82- .spl { width: 100%; table-layout: fixed; & .tx { overflow: hidden; text-overflow: ellipsis; } & .ln { width: 6ch; } & .m { width: 2ch; } }
82+ /* split: a fixed layout takes its widths from the colgroup (the first row is
83+ the hunk header, which spans all columns); long lines wrap in their half */
84+ .spl {
85+ width: 100%; table-layout: fixed;
86+ & .c-ln { width: 7ch; } & .c-m { width: 2.5ch; }
87+ & .tx, & .hunk td { white-space: pre-wrap; overflow-wrap: anywhere; }
88+ & td.ln:nth-child(4) { border-left: 1px solid var(--border); }
89+ }
8390 #diffs[data-diff="unified"] .spl, #diffs[data-diff="split"] .uni { display: none; }
8491
8592 /* diff table of contents in the rail */
@@ -79,7 +79,14 @@
79 & .none { background: var(--paper-alt); }79 & .none { background: var(--paper-alt); }
80 }80 }
81 .dscroll { overflow-x: auto; background: var(--bg-surface); border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--r) var(--r); }81 .dscroll { overflow-x: auto; background: var(--bg-surface); border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--r) var(--r); }
82- .spl { width: 100%; table-layout: fixed; & .tx { overflow: hidden; text-overflow: ellipsis; } & .ln { width: 6ch; } & .m { width: 2ch; } }82+ /* split: a fixed layout takes its widths from the colgroup (the first row is
83+ the hunk header, which spans all columns); long lines wrap in their half */
84+ .spl {
85+ width: 100%; table-layout: fixed;
86+ & .c-ln { width: 7ch; } & .c-m { width: 2.5ch; }
87+ & .tx, & .hunk td { white-space: pre-wrap; overflow-wrap: anywhere; }
88+ & td.ln:nth-child(4) { border-left: 1px solid var(--border); }
89+ }
83 #diffs[data-diff="unified"] .spl, #diffs[data-diff="split"] .uni { display: none; }90 #diffs[data-diff="unified"] .spl, #diffs[data-diff="split"] .uni { display: none; }
84 91
85 /* diff table of contents in the rail */92 /* diff table of contents in the rail */

Keyboard shortcuts

Single-key shortcuts are on. ctrl k and esc work whatever this says.

ctrl k :
go to a section, branch, tag, file or repository
?
this list
j k
move the row cursor down / up
enter
open the row under the cursor; on Files, a directory opens or closes in place
↑ ↓ ← → home end
in the file tree (focus on a row): previous / next row, close / open a directory or go to its parent / first entry, first / last row. They never open a file
l h
on Files: open a directory or a file / close a directory or go up to its parent, then to the parent page. Elsewhere: into the side panel (on a merge request, its files) / back to the content; there j k move between its controls
g g G
first / last row
/
filter the list; on Files, find a file anywhere in the repository (esc clears, enter opens the best match)
b
switch branch or tag
g s g f g c g b g m g i g r g a
tabs: summary, files, commits, branches & tags, merge requests, issues, releases, actions (when available)
g h
home
w
wide mode: use the whole width of the screen, or not (remembered)
y
copy a permalink pinned to the commit
d u x
diff: split / unified / collapse or expand all
e E
diff: the whole file in view / every file, with the lines the hunks hide
n
merge request: next note in the diff
esc
close a dialog, leave a field

Branches 2

Tags 45

↑↓ moveenter openesc close