From dfb01b2d4911d6bb67e1d89e3de3592560e38aa4 Mon Sep 17 00:00:00 2001
From: neodk2004 <barac.daniel@gmail.com>
Date: Sun, 16 Aug 2026 13:34:27 +0200
Subject: [PATCH] fix(explore): make species tab bar horizontally scrollable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

TabsList is inline-flex/w-fit with no overflow handling, so all 14+
species tabs squeezed into one line as the taxonomy grew instead of
scrolling. Wraps it in an overflow-x-auto container, scoped to the
Explore page only — the shared Tabs component is used elsewhere with
small, fixed tab counts that don't need this. Fixes Gitea #27.
---
 src/app/(app)/explore/page.tsx | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/app/(app)/explore/page.tsx b/src/app/(app)/explore/page.tsx
index 6df636a..6e6d2d1 100644
--- a/src/app/(app)/explore/page.tsx
+++ b/src/app/(app)/explore/page.tsx
@@ -94,18 +94,20 @@ export default function ExplorePage() {
       <h1 className="text-xl font-semibold mb-4">{t("title")}</h1>
 
       <Tabs value={activeTab} onValueChange={handleTabChange} className="mb-4">
-        <TabsList>
-          <TabsTrigger value="trending" className="gap-1">
-            <TrendingUp className="h-3.5 w-3.5" />
-            {t("trending")}
-          </TabsTrigger>
-          <TabsTrigger value="all">{t("all")}</TabsTrigger>
-          {(speciesList ?? []).map((s) => (
-            <TabsTrigger key={s.id} value={s.id}>
-              {s.name}
+        <div className="overflow-x-auto">
+          <TabsList className="w-max">
+            <TabsTrigger value="trending" className="gap-1">
+              <TrendingUp className="h-3.5 w-3.5" />
+              {t("trending")}
             </TabsTrigger>
-          ))}
-        </TabsList>
+            <TabsTrigger value="all">{t("all")}</TabsTrigger>
+            {(speciesList ?? []).map((s) => (
+              <TabsTrigger key={s.id} value={s.id}>
+                {s.name}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </div>
       </Tabs>
 
       {/* Breed filter — only when a species tab is active */}