Fix #209 r2: sort arrows immediately right of label text

Fix #205: stop gutter drift from phantom newline rows

internal/api/ratelimit_test.go

@@ -166,8 +166,11 @@ func TestHighlightCode(t *testing.T) {
 	if plain != "<b>x</b>" {
 		t.Fatalf("plain escaping wrong: %q", plain)
 	}
-	// line count preserved (gutter alignment)
-	if got := len(splitLines(lang.HighlightCode("a\nb\nc", "go"))); got != 3 {
+	// #205: newline join preserved as the delimiter paste-lines.js splits on;
+	// per-line segments survive and the client joins with '' so no newline
+	// text node reaches the rendered DOM.
+	hl := lang.HighlightCode("a\nb\nc", "go")
+	if got := len(splitLines(hl)); got != 3 {
 		t.Fatalf("want 3 lines, got %d", got)
 	}
 }

internal/lang/highlight.go

@@ -146,5 +146,9 @@ func HighlightCode(content, langID string) string {
 	for i, line := range lines {
 		out[i] = highlightLine(line, h, langID)
 	}
+	// Note: lines are joined with "\n" on purpose — paste-lines.js splits on
+	// the newline to build its per-line .codeline blocks, then joins those
+	// with "" and strips whitespace-only text nodes (#205), so no newline
+	// text node ever reaches the rendered DOM.
 	return strings.Join(out, "\n")
 }

internal/web/static/app.css

@@ -523,12 +523,11 @@ td .id-link:hover { color: var(--accent); }
 th.sortable { cursor: pointer; user-select: none; }
 th.sortable:hover { color: var(--fg); }
 th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
-/* #209: arrow sits RIGHT of the label, vertically centered, and absolutely
-   positioned so it never shifts the label text; label aligns with column contents. */
-th.sortable { position: relative; padding-right: 24px; }
+/* #209 rev: arrow sits IMMEDIATELY right of the label text (inline, small gap),
+   vertically centered, so the label text aligns with its column contents. */
 th.sortable .sort-ind {
-  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
-  display: inline-block; width: 0; height: 0;
+  display: inline-block; margin-left: 6px; vertical-align: middle;
+  width: 0; height: 0;
   border-left: 5px solid transparent; border-right: 5px solid transparent;
 }
 th.sorted.asc .sort-ind { border-bottom: 6px solid var(--accent); }

internal/web/static/paste-lines.js

@@ -17,7 +17,10 @@
   // because HighlightCode highlights per line) in a .codeline block. The
   // spans are display:block, so they are joined with '' — a '\n' join leaves
   // newline text nodes between blocks that pre-wrap renders as an extra line
-  // box per line, which would shift every following number down one row (#167).
+  // box per line, which would shift every following number down one row (#167,
+  // #205). Whitespace-only text nodes are also stripped defensively below: any
+  // that reach the DOM (older cached HTML, other templates) render as phantom
+  // rows under white-space: pre and drift the gutter.
   function splitLines() {
     var html = body.innerHTML;
     var parts = html.split('\n');
@@ -26,6 +29,12 @@
       out.push('<span class="codeline">' + parts[i] + '</span>');
     }
     body.innerHTML = out.join('');
+    // #205: strip whitespace-only text nodes between the .codeline blocks.
+    var ws = [];
+    for (var n = body.firstChild; n; n = n.nextSibling) {
+      if (n.nodeType === 3 && !/\S/.test(n.nodeValue)) ws.push(n);
+    }
+    for (var w = 0; w < ws.length; w++) body.removeChild(ws[w]);
   }
 
   // One .gutline block per visual row. The gutter must reproduce the code

internal/web/templates/history.html

@@ -10,13 +10,13 @@
     <table>
       <colgroup><col class="col-a"><col class="col-b"><col class="col-c"><col class="col-d"><col class="col-e"><col class="col-f"><col class="col-g"></colgroup>
       <thead><tr>
-        <th data-sort="title" class="sortable"><span class="sort-ind"></span>Paste</th>
-        <th data-sort="language" class="sortable"><span class="sort-ind"></span>Language</th>
-        <th data-sort="size" class="sortable"><span class="sort-ind"></span>Size</th>
-        <th data-sort="view_count" class="sortable"><span class="sort-ind"></span>Views</th>
-        <th data-sort="created_at" class="sortable"><span class="sort-ind"></span>Created</th>
-        <th data-sort="custom_slug" class="sortable"><span class="sort-ind"></span>URL</th>
-        <th data-sort="id" class="sortable"><span class="sort-ind"></span>ID</th>
+        <th data-sort="title" class="sortable">Paste<span class="sort-ind"></span></th>
+        <th data-sort="language" class="sortable">Language<span class="sort-ind"></span></th>
+        <th data-sort="size" class="sortable">Size<span class="sort-ind"></span></th>
+        <th data-sort="view_count" class="sortable">Views<span class="sort-ind"></span></th>
+        <th data-sort="created_at" class="sortable">Created<span class="sort-ind"></span></th>
+        <th data-sort="custom_slug" class="sortable">URL<span class="sort-ind"></span></th>
+        <th data-sort="id" class="sortable">ID<span class="sort-ind"></span></th>
       </tr></thead>
       <tbody id="rows"></tbody>
     </table>

internal/web/templates/mine.html

@@ -10,12 +10,12 @@
     <table>
       <colgroup><col class="col-a"><col class="col-b"><col class="col-c"><col class="col-d2"><col class="col-e"><col class="col-f"><col class="col-del"></colgroup>
       <thead><tr>
-        <th data-sort="title" class="sortable"><span class="sort-ind"></span>Paste</th>
-        <th data-sort="language" class="sortable"><span class="sort-ind"></span>Language</th>
-        <th data-sort="size" class="sortable"><span class="sort-ind"></span>Size</th>
-        <th data-sort="created_at" class="sortable"><span class="sort-ind"></span>Created</th>
-        <th data-sort="custom_slug" class="sortable"><span class="sort-ind"></span>URL</th>
-        <th data-sort="id" class="sortable"><span class="sort-ind"></span>ID</th>
+        <th data-sort="title" class="sortable">Paste<span class="sort-ind"></span></th>
+        <th data-sort="language" class="sortable">Language<span class="sort-ind"></span></th>
+        <th data-sort="size" class="sortable">Size<span class="sort-ind"></span></th>
+        <th data-sort="created_at" class="sortable">Created<span class="sort-ind"></span></th>
+        <th data-sort="custom_slug" class="sortable">URL<span class="sort-ind"></span></th>
+        <th data-sort="id" class="sortable">ID<span class="sort-ind"></span></th>
         <th aria-label="Delete"></th>
       </tr></thead>
       <tbody id="rows"></tbody>