From 8e16449d045676cd3cda70c30cc8ef043f6a6a43 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Fri, 7 Nov 2025 21:43:52 +0000
Subject: [PATCH] completionId: cgen-c80fac11d4914ee19417f2ee3340f373

cgen-c80fac11d4914ee19417f2ee3340f373
---
 client/components/ArmSwitcher.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/components/ArmSwitcher.tsx b/client/components/ArmSwitcher.tsx
index c682cee7..828d6d1a 100644
--- a/client/components/ArmSwitcher.tsx
+++ b/client/components/ArmSwitcher.tsx
@@ -110,24 +110,24 @@ export default function ArmSwitcher() {
         ))}
       </div>
 
-      {/* Tablet Version - Compact Horizontal Bar (md to lg) */}
-      <div className="hidden md:flex lg:hidden items-center justify-center gap-2 px-2">
+      {/* Tablet Version - Spaced Horizontal Layout (md to lg) */}
+      <div className="hidden md:flex lg:hidden items-center gap-6 sm:gap-10">
         {ARMS.map((arm) => (
           <button
             key={arm.id}
             onClick={() => handleArmClick(arm.href)}
-            className={`group relative h-10 w-10 flex items-center justify-center rounded-lg transition-all duration-200 hover:scale-110 ${arm.bgColor}`}
+            className="group relative h-12 w-12 flex items-center justify-center rounded-lg hover:scale-125 transition-transform duration-200"
             title={arm.name}
           >
             <img
               src={LOGO_URLS[arm.id]}
               alt={arm.label}
-              className="relative h-6 w-6 object-contain"
+              className="relative h-8 w-8 object-contain transition-all duration-200"
             />
 
             {/* Tooltip */}
-            <div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 px-2 py-1 bg-gray-900 rounded text-xs text-white opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap pointer-events-none z-50">
-              {arm.label}
+            <div className="absolute top-full left-1/2 -translate-x-1/2 mt-3 px-2 py-1 bg-gray-900 rounded text-xs text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap pointer-events-none z-50">
+              {arm.name}
             </div>
           </button>
         ))}