From be2b4fb47f9d835e44c19f38a4af399fcb4b2ad0 Mon Sep 17 00:00:00 2001
From: poslop <poslop@archfox.org>
Date: Wed, 9 Sep 2026 17:17:00 -0500
Subject: [PATCH] Sort arrows: left of label, further spaced, vertically
 centered, no label shift (#101)

Arrow is absolutely positioned at left:8px in the th, label padding-left
24px; translateY(-50%) keeps it centered regardless of row height, and
being out of flow the label never moves between sorted/unsorted states.
---
 internal/web/static/app.css         | 13 ++++++++++++-
 internal/web/templates/history.html | 14 +++++++-------
 internal/web/templates/mine.html    | 12 ++++++------
 3 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/internal/web/static/app.css b/internal/web/static/app.css
index 5e00b58..d37f050 100644
--- a/internal/web/static/app.css
+++ b/internal/web/static/app.css
@@ -356,10 +356,21 @@ 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; }
-.sort-ind { display: inline-block; width: 0; height: 0; margin-left: 8px; vertical-align: middle; border-left: 5px solid transparent; border-right: 5px solid transparent; }
+/* #101: arrow sits LEFT of the label, further spaced, vertically centered,
+   and absolutely positioned so it never shifts the label text. */
+th.sortable { position: relative; padding-left: 24px; }
+th.sortable .sort-ind {
+  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
+  display: inline-block; 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); }
 th.sorted.desc .sort-ind { border-top: 6px solid var(--accent); }
 
+/* #102: small unobtrusive admin link on the settings page */
+a.admin-link { color: var(--muted-fg); font-size: 15px; text-decoration: none; }
+a.admin-link:hover { color: var(--fg); text-decoration: underline; }
+
 /* ============================================================
    Consistency audit (#18) — shared tokens across inputs, buttons,
    headings. Visual-only, no behavior change.
diff --git a/internal/web/templates/history.html b/internal/web/templates/history.html
index 23a4b43..b6018d0 100644
--- a/internal/web/templates/history.html
+++ b/internal/web/templates/history.html
@@ -10,13 +10,13 @@
     <table>
       <colgroup><col style="width:260px"><col style="width:140px"><col style="width:120px"><col style="width:96px"><col style="width:140px"><col style="width:190px"><col style="width:100px"></colgroup>
       <thead><tr>
-        <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>
+        <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>
       </tr></thead>
       <tbody id="rows"></tbody>
     </table>
diff --git a/internal/web/templates/mine.html b/internal/web/templates/mine.html
index 2253da8..f5def5b 100644
--- a/internal/web/templates/mine.html
+++ b/internal/web/templates/mine.html
@@ -10,12 +10,12 @@
     <table>
       <colgroup><col style="width:260px"><col style="width:140px"><col style="width:120px"><col style="width:150px"><col style="width:190px"><col style="width:100px"></colgroup>
       <thead><tr>
-        <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 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>
       </tr></thead>
       <tbody id="rows"></tbody>
     </table>