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:
@@ -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 */}
|
||||
|
||||
Reference in New Issue
Block a user