1 file changed, 34 insertions, 2 deletions
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 {