fix sidebar and resizable panels

apps/studio/components/layouts/NavigationV2/DefaultLayoutV2.tsx

@@ -17,9 +17,9 @@ export interface DefaultLayoutV2Props {
   headerTitle?: string
 }
 
-const LEFT_SIDEBAR_MIN_SIZE_PERCENTAGE = 14
-const LEFT_SIDEBAR_DEFAULT_SIZE_PERCENTAGE = 18
-const LEFT_SIDEBAR_MAX_SIZE_PERCENTAGE = 32
+const contentMaxSizePercentage = 70
+const leftSidebarMinSize = 220
+const leftSidebarMaxSize = 450
 
 /**
  * New three-column layout for the dashboard (V2 navigation).
@@ -57,9 +57,9 @@ export const DefaultLayoutV2 = ({ children }: PropsWithChildren<DefaultLayoutV2P
                     >
                       <ResizablePanel
                         id="panel-v2-left-sidebar"
-                        minSize={LEFT_SIDEBAR_MIN_SIZE_PERCENTAGE}
-                        maxSize={LEFT_SIDEBAR_MAX_SIZE_PERCENTAGE}
-                        defaultSize={LEFT_SIDEBAR_DEFAULT_SIZE_PERCENTAGE}
+                        minSize={leftSidebarMinSize}
+                        maxSize={leftSidebarMaxSize}
+                        defaultSize={`${contentMaxSizePercentage}`}
                         className="h-full min-h-0 overflow-hidden"
                       >
                         <AppSidebarV2 scope={scope} />
@@ -67,9 +67,9 @@ export const DefaultLayoutV2 = ({ children }: PropsWithChildren<DefaultLayoutV2P
                       <ResizableHandle withHandle className="hidden md:flex bg-background" />
                       <ResizablePanel
                         id="panel-v2-main-content"
-                        minSize={100 - LEFT_SIDEBAR_MAX_SIZE_PERCENTAGE}
-                        maxSize={100 - LEFT_SIDEBAR_MIN_SIZE_PERCENTAGE}
-                        defaultSize={100 - LEFT_SIDEBAR_DEFAULT_SIZE_PERCENTAGE}
+                        minSize={`${100 - contentMaxSizePercentage}`}
+                        // maxSize={`${100 - contentMinSizePercentage}`}
+                        defaultSize={`${100 - contentMaxSizePercentage}`}
                         className="h-full min-h-0 min-w-0 overflow-hidden"
                       >
                         <div className="flex h-full min-h-0 flex-1 overflow-hidden">{children}</div>

apps/studio/components/layouts/NavigationV2/RightIconRail.tsx

@@ -1,7 +1,7 @@
 import { useBreakpoint } from 'common'
 import { SqlEditor } from 'icons'
 import { HelpCircle, Lightbulb } from 'lucide-react'
-import type { ReactNode } from 'react'
+import { useEffect, type ReactNode } from 'react'
 import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
 import {
   AiIconAnimation,
@@ -14,6 +14,8 @@ import {
   TooltipTrigger,
 } from 'ui'
 
+import { useMobileSheet } from '../Navigation/NavigationBar/MobileSheetContext'
+import { isSidebarId } from '../ProjectLayout/LayoutSidebar'
 import { SIDEBAR_KEYS } from '../ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
 
 interface RailItem {
@@ -45,19 +47,38 @@ const RAIL_ITEMS: RailItem[] = [
     icon: () => <Lightbulb size={16} strokeWidth={1.5} />,
   },
   {
-    id: SIDEBAR_KEYS.SUPPORT_PANEL,
+    // id: SIDEBAR_KEYS.SUPPORT_PANEL,
+    id: SIDEBAR_KEYS.HELP_PANEL,
     label: 'Help & Support',
     icon: () => <HelpCircle size={16} strokeWidth={1.5} />,
   },
 ]
 
-const RIGHT_SIDEBAR_MIN_SIZE_PERCENTAGE = 22
-const RIGHT_SIDEBAR_DEFAULT_SIZE_PERCENTAGE = 34
-const RIGHT_SIDEBAR_MAX_SIZE_PERCENTAGE = 55
+const RIGHT_SIDEBAR_MIN_SIZE_PERCENTAGE = 300
+const RIGHT_SIDEBAR_DEFAULT_SIZE_PERCENTAGE = 340
+const RIGHT_SIDEBAR_MAX_SIZE_PERCENTAGE = 750
 
 function RightIconRail() {
   const { activeSidebar, toggleSidebar } = useSidebarManagerSnapshot()
 
+  const isMobile = useBreakpoint('md')
+  const { content: sheetContent, setContent: setMobileSheetContent } = useMobileSheet()
+
+  useEffect(() => {
+    if (!isMobile) {
+      setMobileSheetContent(null)
+      return
+    }
+    if (activeSidebar?.component) {
+      setMobileSheetContent(activeSidebar.id)
+    } else if (isSidebarId(sheetContent)) {
+      setMobileSheetContent(null)
+    }
+  }, [isMobile, activeSidebar, sheetContent, setMobileSheetContent])
+
+  // if (!activeSidebar?.component) return null
+  // if (isMobile) return null
+
   return (
     <aside className="bg-dash-sidebar text-foreground-lighter border-default flex w-10 shrink-0 border-l">
       <nav className="flex flex-1 flex-col items-center justify-center gap-2 py-2 pt-3">
@@ -113,16 +134,15 @@ export function RightRailLayout({ children }: { children: ReactNode }) {
     <div className="flex min-h-0 flex-1 overflow-hidden">
       {showRightSidebar ? (
         <ResizablePanelGroup
-          direction="horizontal"
+          orientation="horizontal"
           autoSaveId="default-layout-v2-right-sidebar"
           className="min-h-0 min-w-0 flex-1 overflow-hidden"
         >
           <ResizablePanel
             id="panel-v2-right-main-content"
-            order={1}
-            minSize={100 - RIGHT_SIDEBAR_MAX_SIZE_PERCENTAGE}
-            maxSize={100 - RIGHT_SIDEBAR_MIN_SIZE_PERCENTAGE}
-            defaultSize={100 - RIGHT_SIDEBAR_DEFAULT_SIZE_PERCENTAGE}
+            // minSize={100 - RIGHT_SIDEBAR_MAX_SIZE_PERCENTAGE}
+            // maxSize={100 - RIGHT_SIDEBAR_MIN_SIZE_PERCENTAGE}
+            // defaultSize={100 - RIGHT_SIDEBAR_DEFAULT_SIZE_PERCENTAGE}
             className="h-full min-h-0 min-w-0 overflow-hidden"
           >
             <div className="min-h-0 min-w-0 h-full">{children}</div>
@@ -130,7 +150,6 @@ export function RightRailLayout({ children }: { children: ReactNode }) {
           <ResizableHandle withHandle className="hidden md:flex bg-background" />
           <ResizablePanel
             id="panel-v2-right-sidebar"
-            order={2}
             minSize={RIGHT_SIDEBAR_MIN_SIZE_PERCENTAGE}
             maxSize={RIGHT_SIDEBAR_MAX_SIZE_PERCENTAGE}
             defaultSize={RIGHT_SIDEBAR_DEFAULT_SIZE_PERCENTAGE}

apps/studio/components/layouts/ProjectLayout/LayoutSidebar/index.tsx

@@ -6,7 +6,7 @@ import { cn, ResizableHandle, ResizablePanel } from 'ui'
 
 import { SIDEBAR_KEYS, type TYPEOF_SIDEBAR_KEYS } from './LayoutSidebarProvider'
 
-function isSidebarId(content: unknown): content is TYPEOF_SIDEBAR_KEYS {
+export function isSidebarId(content: unknown): content is TYPEOF_SIDEBAR_KEYS {
   return (
     typeof content === 'string' &&
     Object.values(SIDEBAR_KEYS).includes(content as TYPEOF_SIDEBAR_KEYS)