fix(explore): make species tab bar horizontally scrollable

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.
This commit is contained in:
2026-08-16 13:34:27 +02:00
parent 6a61bbcc81
commit dfb01b2d49
+13 -11
View File
@@ -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 */}