web: the add/delete tint spans the whole diff row !86

merged merged by cmc on 2026-08-26 22:48 UTC · krz/gitbay:diff-row-tint into main

3 files changed, +16 −9

Layout: unified · split

e2e/diffweb_test.go +6 −1

 		t.Error("diff content is not syntax highlighted")
 	}
 	// The +/- markers are CSS, so a copied selection is real source.
-	if strings.Contains(body, `<td class="code">+`) {
+	if strings.Contains(body, `<td class="src">+`) {
 		t.Error("diff markers are in the markup, not the stylesheet")
 	}
+	// The cell must not use .code: that class carries its own background,
+	// which would paint over the add/delete row tint.
+	if strings.Contains(body, `<td class="code">`) {
+		t.Error("diff cells use the blob code class, whose background hides the row tint")
+	}
 }
 // jsonField pulls the first "name":"value" string out of a JSON blob.

internal/web/static/style.css +7 −5

   border-right: 1px solid var(--line);
   white-space: nowrap;
 }
-table.difftable td.code {
+/* not .code: that class is the blob/code-block style and carries its own
+   background, which painted over every row tint */
+table.difftable td.src {
   padding: 0 var(--sp-3);
   white-space: pre-wrap;
   overflow-wrap: anywhere;
 }
 /* the marker is decoration, so it lives in CSS and stays out of a copied
    selection */
-table.difftable tr.add td.code::before { content: "+"; color: var(--ok); }
+table.difftable tr.add td.src::before { content: "+"; color: var(--ok); }
-table.difftable tr.del td.code::before { content: "\2212"; color: var(--bad); }
+table.difftable tr.del td.src::before { content: "\2212"; color: var(--bad); }
-table.difftable tr.ctx td.code::before { content: " "; }
+table.difftable tr.ctx td.src::before { content: " "; }
 table.difftable tr.add { background: var(--diff-add); }
 table.difftable tr.del { background: var(--diff-del); }
 table.difftable tr.hunk td, table.difftable tr.dmeta td {
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
 }
-table.difftable tr.hunk td.code { color: var(--accent); }
+table.difftable tr.hunk td.src { color: var(--accent); }
 table.difftable tr.threadrow td { padding: var(--sp-2) var(--sp-3); background: var(--bg); }
 /* badges: signature and check states. Semantic colors stay distinct:

internal/web/templates/layout.html +3 −3

	@@ -126,9 +126,9 @@
126	</summary>	126	</summary>
127	{{if .Binary}}<p class="none">Binary file not shown.</p>	127	{{if .Binary}}<p class="none">Binary file not shown.</p>
128	{{else}}<div class="tablewrap"><table class="difftable">	128	{{else}}<div class="tablewrap"><table class="difftable">
129	{{range .Lines}}{{if eq .Class "hunk"}}<tr class="hunk"><td class="ln" colspan="2"></td><td class="code">{{.Text}}</td></tr>	129	{{range .Lines}}{{if eq .Class "hunk"}}<tr class="hunk"><td class="ln" colspan="2"></td><td class="src">{{.Text}}</td></tr>
130	{{else if eq .Class "meta"}}<tr class="dmeta"><td class="ln" colspan="2"></td><td class="code">{{.Text}}</td></tr>	130	{{else if eq .Class "meta"}}<tr class="dmeta"><td class="ln" colspan="2"></td><td class="src">{{.Text}}</td></tr>
131	{{else}}<tr class="{{.Class}}"><td class="ln">{{if .OldLine}}{{.OldLine}}{{end}}</td><td class="ln">{{if .NewLine}}{{.NewLine}}{{end}}</td><td class="code">{{if .Code}}{{.Code}}{{else}}{{.Content}}{{end}}</td></tr>	131	{{else}}<tr class="{{.Class}}"><td class="ln">{{if .OldLine}}{{.OldLine}}{{end}}</td><td class="ln">{{if .NewLine}}{{.NewLine}}{{end}}</td><td class="src">{{if .Code}}{{.Code}}{{else}}{{.Content}}{{end}}</td></tr>
132	{{end}}{{range .Threads}}<tr class="threadrow"><td colspan="3"><div class="thread{{if .Resolved}} resolved{{end}}">{{if .Resolved}}<p class="threadstate">resolved by {{.Resolved}}</p>{{end}}{{range .Comments}}<p class="commenthead"><strong>{{.Author}}</strong> <span class="when">{{when .CreatedAt}}</span></p><div class="rendered">{{.BodyHTML}}</div>{{end}}{{template "threadact" dict "ID" .ID "Resolved" .Resolved "Base" $base "Can" $can}}</div></td></tr>	132	{{end}}{{range .Threads}}<tr class="threadrow"><td colspan="3"><div class="thread{{if .Resolved}} resolved{{end}}">{{if .Resolved}}<p class="threadstate">resolved by {{.Resolved}}</p>{{end}}{{range .Comments}}<p class="commenthead"><strong>{{.Author}}</strong> <span class="when">{{when .CreatedAt}}</span></p><div class="rendered">{{.BodyHTML}}</div>{{end}}{{template "threadact" dict "ID" .ID "Resolved" .Resolved "Base" $base "Can" $can}}</div></td></tr>
133	{{end}}{{end}}	133	{{end}}{{end}}
134	</table></div>{{end}}	134	</table></div>{{end}}