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>