From 44f35376130709da2087976da9b3d4fffd9f7a2f Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Thu, 13 Nov 2025 07:16:53 +0000
Subject: [PATCH] completionId: cgen-43ca1d25727a43cb93fd953bf0d5a849

cgen-43ca1d25727a43cb93fd953bf0d5a849
---
 client/pages/Feed.tsx | 50 ++++++++++++++++++++++---------------------
 1 file changed, 26 insertions(+), 24 deletions(-)

diff --git a/client/pages/Feed.tsx b/client/pages/Feed.tsx
index 2dc2ff42..57810fac 100644
--- a/client/pages/Feed.tsx
+++ b/client/pages/Feed.tsx
@@ -474,30 +474,32 @@ export default function Feed() {
                   ))}
                 </div>
 
-                <div className="flex flex-wrap items-center gap-2">
-                  {ARMS.map((arm) => (
-                    <Button
-                      key={arm.id}
-                      variant={selectedArms.includes(arm.id) ? "default" : "outline"}
-                      size="sm"
-                      onClick={() =>
-                        setSelectedArms((prev) =>
-                          prev.includes(arm.id)
-                            ? prev.filter((a) => a !== arm.id)
-                            : [...prev, arm.id],
-                        )
-                      }
-                      className={cn(
-                        "flex items-center gap-2 rounded-full border-border/50 px-3 py-1.5 text-xs sm:text-sm",
-                        selectedArms.includes(arm.id)
-                          ? "bg-gradient-to-r from-aethex-600 to-neon-blue text-white shadow-md"
-                          : "bg-background/60 text-muted-foreground backdrop-blur hover:border-border",
-                      )}
-                    >
-                      <arm.icon className={cn("h-3.5 w-3.5", arm.color)} />
-                      <span className="font-medium">{arm.label}</span>
-                    </Button>
-                  ))}
+                <div className="overflow-x-auto scrollbar-hide">
+                  <div className="flex items-center gap-2 pb-2 min-w-min">
+                    {ARMS.map((arm) => (
+                      <Button
+                        key={arm.id}
+                        variant={selectedArms.includes(arm.id) ? "default" : "outline"}
+                        size="sm"
+                        onClick={() =>
+                          setSelectedArms((prev) =>
+                            prev.includes(arm.id)
+                              ? prev.filter((a) => a !== arm.id)
+                              : [...prev, arm.id],
+                          )
+                        }
+                        className={cn(
+                          "flex items-center gap-1 sm:gap-2 rounded-full border-border/50 px-2.5 sm:px-3 py-1.5 text-xs whitespace-nowrap flex-shrink-0",
+                          selectedArms.includes(arm.id)
+                            ? "bg-gradient-to-r from-aethex-600 to-neon-blue text-white shadow-md"
+                            : "bg-background/60 text-muted-foreground backdrop-blur hover:border-border",
+                        )}
+                      >
+                        <arm.icon className={cn("h-3 sm:h-3.5 w-3 sm:w-3.5", arm.color)} />
+                        <span className="font-medium hidden sm:inline">{arm.label}</span>
+                      </Button>
+                    ))}
+                  </div>
                 </div>
               </div>
             </div>