From 49fafd3497de8a81fb10128c24c981b9fc908a53 Mon Sep 17 00:00:00 2001
From: Vinta Chen <vinta.chen@gmail.com>
Date: Sun, 22 Mar 2026 02:28:16 +0800
Subject: [PATCH] refactor(website): move back-to-top button into sticky table
 header

Replaces the fixed-position floating button with an inline button
inside the last column of the sticky table header. Removes the hidden
attribute toggle and float positioning in favour of opacity/pointer-
events toggling, keeping the visibility logic intact.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 website/static/main.js       |  1 -
 website/static/style.css     | 35 +++++++++--------------------------
 website/templates/base.html  |  2 --
 website/templates/index.html |  4 +++-
 4 files changed, 12 insertions(+), 30 deletions(-)

diff --git a/website/static/main.js b/website/static/main.js
index bff73a0d..1b9cc7d0 100644
--- a/website/static/main.js
+++ b/website/static/main.js
@@ -282,7 +282,6 @@ if (searchInput) {
 // Back to top
 var backToTop = document.querySelector('.back-to-top');
 if (backToTop) {
-  backToTop.hidden = false;
   var scrollTicking = false;
   window.addEventListener('scroll', function () {
     if (!scrollTicking) {
diff --git a/website/static/style.css b/website/static/style.css
index 867246f7..0a5571f0 100644
--- a/website/static/style.css
+++ b/website/static/style.css
@@ -545,39 +545,26 @@ th[data-sort].sort-asc::after {
 
 /* === Back to Top === */
 .back-to-top {
-  position: fixed;
-  bottom: 2rem;
-  left: 50%;
-  margin-left: -2rem;
-  background: var(--bg);
-  border: 1px solid var(--border-strong);
-  border-radius: 4px;
-  padding: 0.4rem 0.75rem;
+  background: none;
+  border: none;
+  padding: 0;
   font-family: var(--font-body);
-  font-size: var(--text-xs);
+  font-size: 0.8rem;
   font-weight: 600;
-  color: var(--text-muted);
+  color: var(--accent);
   cursor: pointer;
   opacity: 0;
-  transform: translateY(0.5rem);
-  transition: opacity 0.15s ease, transform 0.15s ease, border-color 0.15s, color 0.15s;
-  z-index: 50;
+  transition: opacity 0.15s ease, color 0.15s;
+  pointer-events: none;
 }
 
-.back-to-top[hidden] { display: none; }
-
 .back-to-top.visible {
   opacity: 1;
-  transform: translateY(0);
+  pointer-events: auto;
 }
 
 .back-to-top:hover {
-  border-color: var(--accent);
-  color: var(--accent);
-}
-
-.back-to-top:active {
-  transform: scale(0.95);
+  color: var(--accent-hover);
 }
 
 .back-to-top:focus-visible {
@@ -585,10 +572,6 @@ th[data-sort].sort-asc::after {
   outline-offset: 2px;
 }
 
-@media (max-width: 640px) {
-  .back-to-top { bottom: 1.25rem; }
-}
-
 /* === Noscript === */
 .noscript-msg {
   text-align: center;
diff --git a/website/templates/base.html b/website/templates/base.html
index 2afe5eb6..ea7c7e52 100644
--- a/website/templates/base.html
+++ b/website/templates/base.html
@@ -37,8 +37,6 @@
 
     <main id="content">{% block content %}{% endblock %}</main>
 
-    <button class="back-to-top" aria-label="Back to top" hidden>&uarr; Top</button>
-
     <footer class="footer">
       <span
         >Made by
diff --git a/website/templates/index.html b/website/templates/index.html
index 4d7d8852..5018085c 100644
--- a/website/templates/index.html
+++ b/website/templates/index.html
@@ -76,7 +76,9 @@
         <th class="col-stars" data-sort="stars">GitHub Stars</th>
         <th class="col-commit" data-sort="commit-time">Last Commit</th>
         <th class="col-cat">Category</th>
-        <th class="col-arrow"><span class="sr-only">Details</span></th>
+        <th class="col-arrow">
+          <button class="back-to-top" aria-label="Back to top">&uarr;</button>
+        </th>
       </tr>
     </thead>
     <tbody>