From 8c01459e238608ea5663fe14ce454c8de1841039 Mon Sep 17 00:00:00 2001
From: conversun <conversun@gmail.com>
Date: Tue, 5 May 2026 15:23:31 +0800
Subject: [PATCH] fix: consolidate drawer bottom safe-area padding

Move pb-[var(--safe-area-inset-bottom)] from the outer ResizablePanel
shell into the inner contentRef wrapper so right/bottom drawers follow
the same 'inner sticky-bottom component handles its own pb' pattern as
the left Sidebar (SidebarFooter).

Also fixes a latent bug: in docked mode contentRef is absolute inset-0
which fills the parent padding box, so an outer panel padding-bottom
had no effect on inner content. Putting the padding directly on
contentRef makes safe-area-bottom actually reduce the content area in
both overlay and docked modes.
---
 src/components/BottomPanel.tsx       | 1 -
 src/components/RightPanel.tsx        | 1 -
 src/components/ui/ResizablePanel.tsx | 6 ++----
 3 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/BottomPanel.tsx b/src/components/BottomPanel.tsx
index 1b9525a5..d102f6b1 100644
--- a/src/components/BottomPanel.tsx
+++ b/src/components/BottomPanel.tsx
@@ -223,7 +223,6 @@ export const BottomPanel = memo(function BottomPanel({ directory }: BottomPanelP
       maxSize={layout.bottomPanel.maxHeight}
       onSizeChange={h => layoutStore.setBottomPanelHeight(h)}
       onClose={() => layoutStore.closeBottomPanel()}
-      className="pb-[var(--safe-area-inset-bottom)]"
     >
       <PanelContainer
         position="bottom"
diff --git a/src/components/RightPanel.tsx b/src/components/RightPanel.tsx
index 76af5db5..cbdeedef 100644
--- a/src/components/RightPanel.tsx
+++ b/src/components/RightPanel.tsx
@@ -161,7 +161,6 @@ export const RightPanel = memo(function RightPanel({ directory, sessionId }: Rig
       maxSize={layout.rightPanel.resizeMaxWidth}
       onSizeChange={w => layoutStore.setRightPanelWidth(w)}
       onClose={() => layoutStore.closeRightPanel()}
-      className="pb-[var(--safe-area-inset-bottom)]"
     >
       <PanelContainer
         position="right"
diff --git a/src/components/ui/ResizablePanel.tsx b/src/components/ui/ResizablePanel.tsx
index ec4414d8..ebc20413 100644
--- a/src/components/ui/ResizablePanel.tsx
+++ b/src/components/ui/ResizablePanel.tsx
@@ -32,7 +32,6 @@ export const ResizablePanel = memo(function ResizablePanel({
   const { preferTouchUi, hasCoarsePointer, hasTouch } = useInputCapabilities()
   const touchCapable = preferTouchUi || hasCoarsePointer || hasTouch
   const [isResizing, setIsResizing] = useState(false)
-  const safeBottomInset = 'var(--safe-area-inset-bottom, 0px)'
   const panelRef = useRef<HTMLDivElement>(null)
   const contentRef = useRef<HTMLDivElement>(null)
   const rafRef = useRef<number>(0)
@@ -208,7 +207,6 @@ export const ResizablePanel = memo(function ResizablePanel({
         ? ({
             top: 'calc(var(--safe-area-inset-top, 0px) + var(--desktop-titlebar-height, 0px))',
             height: 'calc(100% - var(--safe-area-inset-top, 0px) - var(--desktop-titlebar-height, 0px))',
-            paddingBottom: safeBottomInset,
           } as React.CSSProperties)
         : ({} as React.CSSProperties)
 
@@ -242,7 +240,7 @@ export const ResizablePanel = memo(function ResizablePanel({
             </div>
           )}
 
-          <div ref={contentRef} className="flex-1 flex flex-col min-h-0 min-w-0 w-full h-full relative bg-bg-100">
+          <div ref={contentRef} className="flex-1 flex flex-col min-h-0 min-w-0 w-full h-full relative bg-bg-100 pb-[var(--safe-area-inset-bottom)]">
             {children}
           </div>
         </div>
@@ -293,7 +291,7 @@ export const ResizablePanel = memo(function ResizablePanel({
 
       {isResizing && <div className="absolute inset-0 z-40 bg-transparent pointer-events-auto" />}
 
-      <div ref={contentRef} className="absolute inset-0 flex flex-col min-h-0 min-w-0 w-full h-full">
+      <div ref={contentRef} className="absolute inset-0 flex flex-col min-h-0 min-w-0 w-full h-full pb-[var(--safe-area-inset-bottom)]">
         {children}
       </div>
     </div>