From 51abaf64f121368cc6286436f02e62c5dd9122c6 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Fri, 7 Nov 2025 21:23:15 +0000
Subject: [PATCH] completionId: cgen-ea373a981e214e9bb90bf3da3e5e4838

cgen-ea373a981e214e9bb90bf3da3e5e4838
---
 client/components/ArmSwitcher.tsx | 30 +++++++++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/client/components/ArmSwitcher.tsx b/client/components/ArmSwitcher.tsx
index 357c694a..c682cee7 100644
--- a/client/components/ArmSwitcher.tsx
+++ b/client/components/ArmSwitcher.tsx
@@ -74,6 +74,7 @@ const LOGO_URLS: Record<string, string> = {
 export default function ArmSwitcher() {
   const navigate = useNavigate();
   const [isExpanded, setIsExpanded] = useState(false);
+  const [scrollPosition, setScrollPosition] = useState(0);
 
   const handleArmClick = (href: string) => {
     navigate(href);
@@ -82,7 +83,7 @@ export default function ArmSwitcher() {
 
   return (
     <>
-      {/* Desktop Version - Horizontal Layout */}
+      {/* Desktop Version - Horizontal Layout (lg+) */}
       <div className="hidden lg:flex items-center gap-6 sm:gap-10 lg:gap-12">
         {ARMS.map((arm) => (
           <button
@@ -109,8 +110,31 @@ export default function ArmSwitcher() {
         ))}
       </div>
 
-      {/* Mobile Version - Expandable Icon */}
-      <div className="lg:hidden relative">
+      {/* Tablet Version - Compact Horizontal Bar (md to lg) */}
+      <div className="hidden md:flex lg:hidden items-center justify-center gap-2 px-2">
+        {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}`}
+            title={arm.name}
+          >
+            <img
+              src={LOGO_URLS[arm.id]}
+              alt={arm.label}
+              className="relative h-6 w-6 object-contain"
+            />
+
+            {/* 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>
+          </button>
+        ))}
+      </div>
+
+      {/* Mobile Version - Expandable Icon (< md) */}
+      <div className="md:hidden relative">
         <button
           onClick={() => setIsExpanded(!isExpanded)}
           className={`relative h-12 w-12 flex items-center justify-center rounded-lg transition-all duration-300 ${