From fd0f262de6de96a2d105e66ee8608173fa4ea2f8 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Tue, 11 Nov 2025 04:52:14 +0000
Subject: [PATCH] completionId: cgen-2850f25580f84ce9a4f15aee6c54c24c

cgen-2850f25580f84ce9a4f15aee6c54c24c
---
 client/components/ArmSwitcher.tsx | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/client/components/ArmSwitcher.tsx b/client/components/ArmSwitcher.tsx
index e43550b7..258b4db2 100644
--- a/client/components/ArmSwitcher.tsx
+++ b/client/components/ArmSwitcher.tsx
@@ -158,14 +158,28 @@ export default function ArmSwitcher() {
         </button>
       </div>
 
-      {/* Mobile Version - Compact */}
-      <div className="md:hidden">
+      {/* Mobile Version - Show first 3 arms + view all */}
+      <div className="md:hidden flex items-center gap-2">
+        {ARMS.slice(0, 3).map((arm) => (
+          <button
+            key={arm.id}
+            onClick={handleArmClick}
+            className="group relative h-10 w-10 flex items-center justify-center rounded-lg hover:scale-110 transition-transform duration-200 flex-shrink-0"
+            title={arm.name}
+          >
+            <img
+              src={LOGO_URLS[arm.id]}
+              alt={arm.label}
+              className="relative h-6 w-6 object-contain transition-all duration-200"
+            />
+          </button>
+        ))}
         <button
           onClick={handleArmClick}
           className="h-10 w-10 flex items-center justify-center rounded-lg border border-border/60 bg-background/60 hover:bg-background/80 transition-colors flex-shrink-0"
           title="View all arms"
         >
-          <span className="text-xs font-semibold text-gray-400">≡</span>
+          <span className="text-xs font-semibold text-gray-400">+4</span>
         </button>
       </div>
     </>