Issue with the effect section on mobile devices

src/App.tsx

@@ -180,11 +180,6 @@ function App() {
     }
     setFocusedTile({ row, col })
 
-    if (playing === id) {
-      handleStop()
-      return
-    }
-
     if (isDoubleClick || playing === null) {
       clearSwitchTimer()
       playFormula(tile.formula, id)
@@ -735,12 +730,14 @@ function App() {
         </div>
       </div>
 
-      <EffectsBar
+      <div className="flex-shrink-0">
-        values={effectValues}
+        <EffectsBar
-        onChange={handleEffectChange}
+          values={effectValues}
-        onMapClick={handleParameterMapClick}
+          onChange={handleEffectChange}
-        getMappedLFOs={getMappedLFOs}
+          onMapClick={handleParameterMapClick}
-      />
+          getMappedLFOs={getMappedLFOs}
+        />
+      </div>
     </div>
   )
 }