diff --git a/packages/ui/src/components/ui/MobileOverlayPanel.tsx b/packages/ui/src/components/ui/MobileOverlayPanel.tsx
index 9757cb04..37a6c32e 100644
--- a/packages/ui/src/components/ui/MobileOverlayPanel.tsx
+++ b/packages/ui/src/components/ui/MobileOverlayPanel.tsx
@@ -77,7 +77,7 @@ export const MobileOverlayPanel: React.FC<MobileOverlayPanelProps> = ({
     >
         <div
           className={cn(
-            'mt-auto w-full rounded-t-xl border border-border/50 bg-background shadow-none pwa-overlay-panel',
+            'mt-auto flex max-h-[calc(100dvh-0.75rem)] min-h-0 w-full flex-col rounded-t-xl border border-border/50 bg-background shadow-none pwa-overlay-panel',
             'mx-auto max-w-lg',
             className
           )}
@@ -106,11 +106,11 @@ export const MobileOverlayPanel: React.FC<MobileOverlayPanelProps> = ({
             </div>
           );
         })()}
-        <ScrollableOverlay outerClassName={contentMaxHeight} className="px-2 py-2 pwa-overlay-scroll">
+        <ScrollableOverlay outerClassName={cn('min-h-0 flex-1', contentMaxHeight)} className="px-2 py-2 pwa-overlay-scroll">
           {children}
         </ScrollableOverlay>
         {footer ? (
-          <div className="border-t border-border/40 px-3 py-2">
+          <div className="shrink-0 border-t border-border/40 px-3 py-2 pb-[max(0.5rem,env(safe-area-inset-bottom))]">
             {footer}
           </div>
         ) : null}