From 89a9c173cac83d59ddd571f46f07fd06f87e7608 Mon Sep 17 00:00:00 2001
From: fen <fen@archfox.org>
Date: Thu, 10 Sep 2026 13:15:06 -0500
Subject: [PATCH] Fix #209 r2: sort arrows immediately right of label text

---
 internal/web/static/app.css         |  9 ++++-----
 internal/web/templates/history.html | 14 +++++++-------
 internal/web/templates/mine.html    | 12 ++++++------
 3 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/internal/web/static/app.css b/internal/web/static/app.css
index 67df380..fe6b124 100644
--- a/internal/web/static/app.css
+++ b/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); }
diff --git a/internal/web/templates/history.html b/internal/web/templates/history.html
index cb6da95..c4bf56f 100644
--- a/internal/web/templates/history.html
+++ b/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>
diff --git a/internal/web/templates/mine.html b/internal/web/templates/mine.html
index 93d7a80..c7922cb 100644
--- a/internal/web/templates/mine.html
+++ b/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>