From e284e5ddcd8fc7bc91998d172fe9ff8999b4c237 Mon Sep 17 00:00:00 2001
From: "kemal.earth" <606977+kemaldotearth@users.noreply.github.com>
Date: Thu, 15 Jan 2026 08:44:08 +0000
Subject: [PATCH] fix(studio): table editor sidebar toggle on mobile (#41894)

fix: table editor sidebar toggle on mobile
---
 .../components/layouts/Tabs/CollapseButton.tsx     | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/apps/studio/components/layouts/Tabs/CollapseButton.tsx b/apps/studio/components/layouts/Tabs/CollapseButton.tsx
index 75e93be206a..5e972241eb1 100644
--- a/apps/studio/components/layouts/Tabs/CollapseButton.tsx
+++ b/apps/studio/components/layouts/Tabs/CollapseButton.tsx
@@ -2,9 +2,19 @@ import { PanelLeftClose, PanelLeftOpen } from 'lucide-react'
 
 import { useAppStateSnapshot } from 'state/app-state'
 import { cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
+import { useBreakpoint } from 'common'
 
 export function CollapseButton({ hideTabs }: { hideTabs: boolean }) {
-  const { showSidebar, setShowSidebar } = useAppStateSnapshot()
+  const { showSidebar, setShowSidebar, mobileMenuOpen, setMobileMenuOpen } = useAppStateSnapshot()
+  const isMobile = useBreakpoint('md')
+
+  const handleToggle = () => {
+    if (isMobile) {
+      setMobileMenuOpen(!mobileMenuOpen)
+    } else {
+      setShowSidebar(!showSidebar)
+    }
+  }
 
   return (
     <Tooltip>
@@ -14,7 +24,7 @@ export function CollapseButton({ hideTabs }: { hideTabs: boolean }) {
             'hidden md:flex items-center justify-center w-10 h-10 hover:bg-surface-100 shrink-0',
             !hideTabs && 'border-b border-b-default'
           )}
-          onClick={() => setShowSidebar(!showSidebar)}
+          onClick={handleToggle}
         >
           {showSidebar ? (
             <PanelLeftClose