From 7d56af688ce82619db0f9159ab897f2a042f85ed Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Mon, 13 Oct 2025 23:16:40 +0000
Subject: [PATCH] Make tab list horizontally scrollable

cgen-348e3a683da44c9482be7a3376b318eb
---
 client/pages/Community.tsx | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/client/pages/Community.tsx b/client/pages/Community.tsx
index 41508471..674ddc43 100644
--- a/client/pages/Community.tsx
+++ b/client/pages/Community.tsx
@@ -1771,17 +1771,19 @@ export default function Community() {
           className="space-y-12"
         >
           <div className="container mx-auto px-4">
-            <TabsList className="flex w-full flex-wrap gap-2 rounded-2xl border border-border/60 bg-background/60 p-2">
-              {communityTabItems.map((tab) => (
-                <TabsTrigger
-                  key={tab.id}
-                  value={tab.id}
-                  className="rounded-xl px-4 py-2 text-sm font-semibold text-muted-foreground transition data-[state=active]:bg-gradient-to-r data-[state=active]:from-aethex-500/20 data-[state=active]:to-neon-blue/20 data-[state=active]:text-foreground data-[state=active]:shadow"
-                >
-                  {tab.label}
-                </TabsTrigger>
-              ))}
-            </TabsList>
+            <div className="overflow-x-auto pb-2">
+              <TabsList className="flex w-max flex-nowrap gap-2 rounded-2xl border border-border/60 bg-background/60 p-2">
+                {communityTabItems.map((tab) => (
+                  <TabsTrigger
+                    key={tab.id}
+                    value={tab.id}
+                    className="rounded-xl px-4 py-2 text-sm font-semibold text-muted-foreground transition data-[state=active]:bg-gradient-to-r data-[state=active]:from-aethex-500/20 data-[state=active]:to-neon-blue/20 data-[state=active]:text-foreground data-[state=active]:shadow"
+                  >
+                    {tab.label}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </div>
           </div>
 
           <TabsContent value="new-members" className="mt-0">