From ff9791f028f7815d5e6e6348327c2094c56c4a81 Mon Sep 17 00:00:00 2001
From: Bryce Kwon <bryce@brycekwon.com>
Date: Sun, 25 Oct 2026 12:02:34 -1000
Subject: Keep the tabs on one row

A window too narrow for the tabs wrapped the last of them onto a second
row, held apart from the line under the others, as an iPhone showed on
every repository page. The row now scrolls sideways instead, keeping
the active tab in view and fading the side that hides more of them, and
the tabs draw closer as the window narrows so all seven still fit at
360 pixels.
---
 assets/cgit.css | 36 ++++++++++++++++++++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

(limited to 'assets/cgit.css')

diff --git a/assets/cgit.css b/assets/cgit.css
index 540480c..8c6f7a4 100644
--- a/assets/cgit.css
+++ b/assets/cgit.css
@@ -263,16 +263,40 @@ div#cgit .tabs {
 
 div#cgit .tabs ul {
   display: flex;
-  flex-wrap: wrap;
   align-items: flex-end;
   flex: 1 1 auto;
-  gap: 0.1em 0.15em;
+  min-width: 0;
+  gap: 0.15em;
   list-style: none;
   margin: 0;
   padding: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+div#cgit .tabs ul::-webkit-scrollbar {
+  display: none;
+}
+
+div#cgit .tabs ul.fade-start {
+  -webkit-mask-image: linear-gradient(to right, transparent, #000 1.5em);
+  mask-image: linear-gradient(to right, transparent, #000 1.5em);
+}
+
+div#cgit .tabs ul.fade-end {
+  -webkit-mask-image: linear-gradient(to left, transparent, #000 1.5em);
+  mask-image: linear-gradient(to left, transparent, #000 1.5em);
+}
+
+div#cgit .tabs ul.fade-start.fade-end {
+  -webkit-mask-image: linear-gradient(to right, transparent, #000 1.5em,
+    #000 calc(100% - 1.5em), transparent);
+  mask-image: linear-gradient(to right, transparent, #000 1.5em,
+    #000 calc(100% - 1.5em), transparent);
 }
 
 div#cgit .tabs li {
+  flex: none;
   margin: 0;
 }
 
@@ -283,6 +307,10 @@ div#cgit .tabs a {
   border-radius: var(--radius) var(--radius) 0 0;
 }
 
+div#cgit .tabs a:focus-visible {
+  outline-offset: -2px;
+}
+
 div#cgit .tabs a:hover {
   color: var(--fg);
   background-color: var(--surface);
@@ -1310,6 +1338,10 @@ div#cgit table.ssdiff td.space {
 }
 
 @media (max-width: 640px) {
+  div#cgit .tabs a {
+    padding: 0.3em 0.4em;
+  }
+
   div#cgit .col-desc,
   div#cgit .col-owner,
   div#cgit .col-links {
-- 
cgit 2.9.2