progress on responsive

src/components/EffectsBar.tsx

@@ -16,6 +16,7 @@ interface EffectsBarProps {
 export function EffectsBar({ values, onChange, onMapClick, getMappedLFOs }: EffectsBarProps) {
   const [expandedEffect, setExpandedEffect] = useState<string | null>(null)
   const [activeTab, setActiveTab] = useState<string>(EFFECTS[0].id)
+  const [isCollapsed, setIsCollapsed] = useState(false)
   const randomizeEffect = (effect: typeof EFFECTS[number]) => {
     effect.parameters.forEach(param => {
       if (param.id.endsWith('Enable')) return
@@ -34,9 +35,9 @@ export function EffectsBar({ values, onChange, onMapClick, getMappedLFOs }: Effe
   }
 
   return (
-    <div className="bg-black border-t-2 border-white px-2 md:px-6 py-3 md:py-4">
+    <div className="bg-black border-t-2 border-white px-2 lg:px-6 py-3 lg:py-4">
       {/* Desktop: Grid layout */}
-      <div className="hidden md:grid md:grid-cols-4 md:gap-4">
+      <div className="hidden lg:grid lg:grid-cols-4 lg:gap-4">
         {EFFECTS.map(effect => {
           return (
             <div key={effect.id} className="border-2 border-white p-3">
@@ -117,14 +118,21 @@ export function EffectsBar({ values, onChange, onMapClick, getMappedLFOs }: Effe
       </div>
 
       {/* Mobile: Tabbed layout */}
-      <div className="md:hidden flex flex-col">
+      <div className="lg:hidden flex flex-col">
         <div className="flex border-2 border-white">
           {EFFECTS.map(effect => (
             <button
               key={effect.id}
-              onClick={() => setActiveTab(effect.id)}
+              onClick={() => {
+                if (activeTab === effect.id && !isCollapsed) {
+                  setIsCollapsed(true)
+                } else {
+                  setActiveTab(effect.id)
+                  setIsCollapsed(false)
+                }
+              }}
               className={`flex-1 p-2 font-mono text-[9px] tracking-[0.15em] transition-colors ${
-                activeTab === effect.id
+                activeTab === effect.id && !isCollapsed
                   ? 'bg-white text-black'
                   : 'bg-black text-white hover:bg-white/10'
               }`}
@@ -133,7 +141,7 @@ export function EffectsBar({ values, onChange, onMapClick, getMappedLFOs }: Effe
             </button>
           ))}
         </div>
-        {EFFECTS.map(effect => {
+        {!isCollapsed && EFFECTS.map(effect => {
           if (activeTab !== effect.id) return null
           return (
             <div key={effect.id} className="border-2 border-t-0 border-white p-3">