fix: clamp modal dialogs to the visible viewport so iOS Safari can't hide their buttons (#5665)

client/src/components/FolderPicker.jsx

@@ -110,7 +110,7 @@ export default function FolderPicker({ value, onChange, defaultPath }) {
           size="md"
           usePortal
           ariaLabelledBy="folder-picker-title"
-          panelClassName="bg-port-card border border-port-border rounded-xl max-h-[80vh] flex flex-col shadow-2xl"
+          panelClassName="bg-port-card border border-port-border rounded-xl flex flex-col shadow-2xl"
         >
           {/* Header */}
           <div className="flex items-center justify-between p-4 border-b border-port-border">

client/src/components/IngredientPicker.jsx

@@ -124,7 +124,7 @@ export default function IngredientPicker({
       onClose={onClose}
       size="xl"
       closeOnBackdrop
-      panelClassName="bg-port-card border border-port-border rounded-xl max-h-[85vh] flex flex-col"
+      panelClassName="bg-port-card border border-port-border rounded-xl flex flex-col"
       ariaLabelledBy="ingredient-picker-title"
     >
       <div className="flex items-center justify-between p-4 border-b border-port-border flex-shrink-0">

client/src/components/apps/DeployPanel.jsx

@@ -130,7 +130,7 @@ export default function DeployPanel({ appId, appName }) {
           onEsc={handleEsc}
           size="xl"
           backdropClassName="bg-black/60"
-          panelClassName="bg-port-bg border border-port-border rounded-xl shadow-2xl max-h-[80vh] flex flex-col"
+          panelClassName="bg-port-bg border border-port-border rounded-xl shadow-2xl flex flex-col"
           ariaLabelledBy="deploy-panel-title"
         >
           <div className="flex items-center justify-between px-4 py-3 border-b border-port-border">

client/src/components/apps/tabs/GitTab.jsx

@@ -1014,7 +1014,7 @@ export default function GitTab({ appId, appName, repoPath }) {
         size="none"
         align="none"
         backdropClassName="bg-black/50"
-        panelClassName="bg-port-card border border-port-border rounded-xl w-3/4 max-h-[80vh] overflow-hidden"
+        panelClassName="bg-port-card border border-port-border rounded-xl w-3/4 overflow-hidden"
         ariaLabelledBy="git-diff-modal-title"
       >
         <div className="flex items-center justify-between p-4 border-b border-port-border">

client/src/components/brain/ConversationViewer.jsx

@@ -32,7 +32,7 @@ export default function ConversationViewer({ record, onClose }) {
       onClose={onClose}
       size="xl"
       ariaLabel={record.title}
-      panelClassName="bg-port-card border border-port-border rounded-lg max-h-[85vh] flex flex-col"
+      panelClassName="bg-port-card border border-port-border rounded-lg flex flex-col"
     >
       <div className="flex items-center justify-between px-4 py-3 border-b border-port-border">
         <h3 className="font-medium text-white truncate pr-4">{record.title}</h3>

client/src/components/cos/tabs/AgentCard.jsx

@@ -963,7 +963,7 @@ export default function AgentCard({ agent, onPause, onKill, onDelete, onResume,
 
       {/* Expanded output view */}
       {expanded && (
-        <div className="border-t border-port-border bg-port-bg/50 p-3 min-w-0 overflow-y-auto max-h-[60vh]">
+        <div className="border-t border-port-border bg-port-bg/50 p-3 min-w-0 overflow-y-auto max-h-dvh-cap [--dvh-cap:60dvh]">
           {/* Pipeline stage tabs */}
           {pipelineStages && (
             <div className="flex items-center gap-1 mb-2 overflow-x-auto">
@@ -1054,7 +1054,7 @@ export default function AgentCard({ agent, onPause, onKill, onDelete, onResume,
         onClose={() => setPromptOpen(false)}
         size="2xl"
         usePortal
-        panelClassName="bg-port-card border border-port-border rounded-lg max-h-[80vh] flex flex-col"
+        panelClassName="bg-port-card border border-port-border rounded-lg flex flex-col"
         ariaLabel="Agent prompt"
       >
         <div className="flex items-center justify-between px-4 py-2 border-b border-port-border shrink-0">

client/src/components/cos/tabs/MemoryEditModal.jsx

@@ -104,7 +104,7 @@ export default function MemoryEditModal({ memory, apps, onSave, onClose }) {
       closeOnEsc={false}
       size="lg"
       backdropClassName="bg-black/50"
-      panelClassName="bg-port-card border border-port-border rounded-xl p-4 sm:p-6 max-h-[90vh] overflow-auto"
+      panelClassName="bg-port-card border border-port-border rounded-xl p-4 sm:p-6"
       ariaLabelledBy="memory-edit-title"
     >
       <div className="flex items-center justify-between mb-4">

client/src/components/cos/tabs/ResumeAgentModal.jsx

@@ -120,7 +120,7 @@ export default function ResumeAgentModal({ agent, taskType = 'user', providers,
       // applies the same flex centring without the default `p-4`.
       align="none"
       backdropClassName="bg-black/50"
-      panelClassName="bg-port-card border border-port-border rounded-xl p-6 max-h-[90vh] overflow-auto"
+      panelClassName="bg-port-card border border-port-border rounded-xl p-6"
       ariaLabelledBy="resume-agent-title"
     >
       <div className="flex items-center justify-between mb-4">

client/src/components/digital-twin/tabs/DocumentsTab.jsx

@@ -323,7 +323,7 @@ export default function DocumentsTab({ onRefresh }) {
         closeOnBackdrop={false}
         closeOnEsc={false}
         ariaLabel="Create Soul Document"
-        panelClassName="bg-port-card rounded-lg border border-port-border p-4 sm:p-6 max-h-[90vh] overflow-y-auto"
+        panelClassName="bg-port-card rounded-lg border border-port-border p-4 sm:p-6"
       >
         <h2 className="text-lg font-semibold text-white mb-4">Create Soul Document</h2>
 

client/src/components/fableloom/LoomHostedSessionModal.jsx

@@ -126,7 +126,7 @@ export default function LoomHostedSessionModal({
       onClose={onClose}
       usePortal
       backdropClassName="bg-black/60 backdrop-blur-sm"
-      panelClassName="bg-port-card border border-port-border rounded-xl shadow-2xl overflow-hidden flex flex-col max-h-[90vh]"
+      panelClassName="bg-port-card border border-port-border rounded-xl shadow-2xl overflow-hidden flex flex-col"
       ariaLabelledBy="hosted-two-device-play-title"
     >
         {/* Header */}

client/src/components/goals/GoalsTreeView.jsx

@@ -267,7 +267,7 @@ function OrganizePanel({ suggestion, goals, onApply, onClose, applying }) {
   if (!suggestion) return null;
 
   return (
-    <div className="absolute top-12 right-3 z-20 bg-port-card border border-port-border rounded-lg p-4 w-96 max-h-[80vh] overflow-y-auto shadow-xl">
+    <div className="absolute top-12 right-3 z-20 bg-port-card border border-port-border rounded-lg p-4 w-96 max-h-dvh-cap [--dvh-cap:80dvh] overflow-y-auto shadow-xl">
       <div className="flex items-center justify-between mb-3">
         <div className="flex items-center gap-2">
           <Wand2 className="w-4 h-4 text-port-accent" />

client/src/components/imageGen/Flux2InstallModal.jsx

@@ -75,7 +75,7 @@ export default function Flux2InstallModal({ open, onClose, onComplete }) {
       // imperceptible (~16px) and not worth a custom override.
       backdropClassName="bg-black/70 backdrop-blur-sm"
       ariaLabelledBy="flux2-install-title"
-      panelClassName="bg-port-card rounded-xl border border-port-border shadow-2xl overflow-hidden flex flex-col max-h-[80vh]"
+      panelClassName="bg-port-card rounded-xl border border-port-border shadow-2xl overflow-hidden flex flex-col"
     >
         {/* Header */}
         <div className="flex items-center justify-between px-5 py-4 border-b border-port-border">

client/src/components/imageGen/GalleryImagePicker.jsx

@@ -244,7 +244,7 @@ export default function GalleryImagePicker({
       // overlay beneath the page header/cards (and beneath a host modal when the
       // picker is opened from inside one).
       usePortal
-      panelClassName="bg-port-card border border-port-border rounded-xl max-h-[85vh] flex flex-col"
+      panelClassName="bg-port-card border border-port-border rounded-xl flex flex-col"
       ariaLabel="Pick an image from your gallery"
     >
       <div className="p-3 border-b border-port-border space-y-2">

client/src/components/install/RuntimeInstallModal.jsx

@@ -70,7 +70,7 @@ export default function RuntimeInstallModal({
       closeOnEsc={false}
       backdropClassName="bg-black/70 backdrop-blur-sm"
       ariaLabelledBy="runtime-install-title"
-      panelClassName="bg-port-card rounded-xl border border-port-border shadow-2xl overflow-hidden flex flex-col max-h-[80vh]"
+      panelClassName="bg-port-card rounded-xl border border-port-border shadow-2xl overflow-hidden flex flex-col"
     >
         <div className="flex items-center justify-between px-5 py-4 border-b border-port-border">
           <div className="flex items-center gap-2.5">

client/src/components/loraTraining/ImportGalleryDialog.jsx

@@ -81,7 +81,7 @@ export default function ImportGalleryDialog({ dataset, onClose, onImported }) {
       open
       onClose={onClose}
       size="3xl"
-      panelClassName="bg-port-card border border-port-border rounded-xl max-h-[85vh] flex flex-col"
+      panelClassName="bg-port-card border border-port-border rounded-xl flex flex-col"
       ariaLabel="Import images from your gallery"
     >
       <div className="flex items-center justify-between gap-3 p-3 border-b border-port-border">

client/src/components/meatspace/tabs/AlcoholTab.jsx

@@ -550,7 +550,7 @@ export default function AlcoholTab() {
           <h3 className="text-sm font-medium text-gray-400 uppercase tracking-wider mb-3">
             All Drink Entries ({allEntries.length} days)
           </h3>
-          <div className="max-h-[70vh] overflow-x-auto overflow-y-auto rounded-lg border border-port-border">
+          <div className="max-h-dvh-cap [--dvh-cap:70dvh] overflow-x-auto overflow-y-auto rounded-lg border border-port-border">
             <table className="w-full text-sm min-w-[600px]">
               <thead className="sticky top-0 bg-port-card z-10">
                 <tr className="border-b border-port-border text-left text-xs text-gray-500 uppercase">

client/src/components/meatspace/tabs/NicotineTab.jsx

@@ -409,7 +409,7 @@ export default function NicotineTab() {
           <h3 className="text-sm font-medium text-gray-400 uppercase tracking-wider mb-3">
             History ({allEntries.length} days)
           </h3>
-          <div className="max-h-[70vh] overflow-x-auto overflow-y-auto rounded-lg border border-port-border">
+          <div className="max-h-dvh-cap [--dvh-cap:70dvh] overflow-x-auto overflow-y-auto rounded-lg border border-port-border">
             <table className="w-full text-sm min-w-[500px]">
               <thead className="sticky top-0 bg-port-card z-10">
                 <tr className="border-b border-port-border text-left text-xs text-gray-500 uppercase">

client/src/components/media/PromptFromMedia.jsx

@@ -398,7 +398,7 @@ export function PromptFromMediaModal({ item, open, onClose, kindDefault = 'both'
       zIndexClassName="z-[70]"
       backdropClassName="bg-black/80"
       ariaLabelledBy="prompt-from-media-title"
-      panelClassName="max-h-[90vh] overflow-hidden bg-port-card border border-port-border rounded-xl shadow-2xl flex flex-col"
+      panelClassName="overflow-hidden bg-port-card border border-port-border rounded-xl shadow-2xl flex flex-col"
     >
       <header className="flex items-center justify-between gap-3 px-4 py-3 border-b border-port-border">
         <div className="flex items-center gap-2 min-w-0">

client/src/components/media/PromptRefineModal.jsx

@@ -121,7 +121,7 @@ export default function PromptRefineModal({ item, open, onClose }) {
       zIndexClassName="z-[70]"
       backdropClassName="bg-black/80"
       ariaLabelledBy="prompt-refine-title"
-      panelClassName="max-h-[90vh] overflow-hidden bg-port-card border border-port-border rounded-xl shadow-2xl flex flex-col"
+      panelClassName="overflow-hidden bg-port-card border border-port-border rounded-xl shadow-2xl flex flex-col"
     >
       <header className="flex items-center justify-between gap-3 px-4 py-3 border-b border-port-border">
         <div className="flex items-center gap-2 min-w-0">

client/src/components/music/AlbumTrackPicker.jsx

@@ -46,7 +46,7 @@ export default function AlbumTrackPicker({ open, tracks = [], onClose, onAdd })
       open={open}
       onClose={onClose}
       size="lg"
-      panelClassName="bg-port-card border border-port-border rounded-xl max-h-[85vh] flex flex-col"
+      panelClassName="bg-port-card border border-port-border rounded-xl flex flex-col"
       ariaLabelledBy="album-track-picker-title"
     >
       <div className="flex items-center justify-between p-4 border-b border-port-border flex-shrink-0">

client/src/components/music/TrackRenderModal.jsx

@@ -34,7 +34,7 @@ export default function TrackRenderModal({ render, active = false, onClose, onSe
       size="lg"
       align="top"
       ariaLabelledBy="track-render-title"
-      panelClassName="bg-port-card rounded-xl border border-port-border shadow-2xl overflow-hidden flex flex-col max-h-[85vh]"
+      panelClassName="bg-port-card rounded-xl border border-port-border shadow-2xl overflow-hidden flex flex-col"
     >
       <div className="flex items-center justify-between px-5 py-3 border-b border-port-border">
         <h2 id="track-render-title" className="text-sm font-semibold text-white flex items-center gap-2">

client/src/components/openworld/OpenWorldFastTravel.jsx

@@ -92,7 +92,7 @@ export default function OpenWorldFastTravel({ open, onClose, onTravel, activeReg
       usePortal
       ariaLabel="Village map"
       zIndexClassName="z-[120]"
-      panelClassName="w-full max-w-3xl max-h-[85vh] rounded-xl border port-media-overlay flex flex-col overflow-hidden"
+      panelClassName="w-full max-w-3xl rounded-xl border port-media-overlay flex flex-col overflow-hidden"
     >
       <div className="flex items-center gap-3 px-4 py-3 border-b border-current/10">
         <div className="font-pixel text-[12px] tracking-widest">VILLAGE MAP</div>

client/src/components/openworld/OpenWorldPhotoOverlay.jsx

@@ -167,7 +167,7 @@ export default function OpenWorldPhotoOverlay({ active, presetId, onPresetChange
         size="none"
         usePortal
         ariaLabel="OpenWorld postcard preview"
-        panelClassName="max-w-[80vw] max-h-[80vh] flex flex-col items-center gap-3"
+        panelClassName="max-w-[80vw] flex flex-col items-center gap-3"
       >
         <img src={postcard} alt="OpenWorld postcard" className="max-w-full max-h-[68vh] rounded-lg border border-cyan-500/40 shadow-[0_0_30px_rgba(6,182,212,0.3)]" />
         <div className="flex gap-3">

client/src/components/pipeline/manuscript/ManuscriptReadAloud.jsx

@@ -225,8 +225,8 @@ export default function ManuscriptReadAloud({ open, onClose, section }) {
   const progressPct = totalMs > 0 ? Math.min(100, (elapsedMs / totalMs) * 100) : 0;
 
   return (
-    <Modal open={open} onClose={onClose} size="3xl" backdropClassName="bg-black/70 p-4" panelClassName="bg-port-card border border-port-border rounded-lg">
-      <div className="flex flex-col max-h-[85vh]">
+    <Modal open={open} onClose={onClose} size="3xl" backdropClassName="bg-black/70 p-4" panelClassName="bg-port-card border border-port-border rounded-lg overflow-hidden flex flex-col">
+      <div className="flex flex-col min-h-0">
         <header className="flex items-center gap-2 px-4 py-3 border-b border-port-border">
           <Volume2 className="w-4 h-4 text-port-accent" />
           <h2 className="text-sm font-semibold text-white">

client/src/components/shell/ShellProviderLauncher.jsx

@@ -113,7 +113,7 @@ export default function ShellProviderLauncher({ providers, onLaunch, onOpen, loa
       {open && createPortal(
         <div
           ref={popoverRef}
-          className="fixed max-w-[calc(100vw-1rem)] max-h-[70vh] overflow-y-auto overscroll-contain z-[100] bg-port-card border border-port-border rounded-lg shadow-xl"
+          className="fixed max-w-[calc(100vw-1rem)] max-h-dvh-cap [--dvh-cap:70dvh] overflow-y-auto overscroll-contain z-[100] bg-port-card border border-port-border rounded-lg shadow-xl"
           style={{
             left: style?.left ?? `${VIEWPORT_PADDING}px`,
             top: style?.top ?? `${VIEWPORT_PADDING}px`,

client/src/components/sprites/ForkSpriteModal.jsx

@@ -64,7 +64,7 @@ export default function ForkSpriteModal({ open, onClose, source, referencePath,
       size="lg"
       usePortal
       closeOnBackdrop={false}
-      panelClassName="bg-port-card border border-port-border rounded-xl max-h-[85vh] flex flex-col"
+      panelClassName="bg-port-card border border-port-border rounded-xl flex flex-col"
       ariaLabel="Fork sprite"
     >
       <div className="flex items-center justify-between gap-3 p-3 border-b border-port-border">

client/src/components/sprites/SpriteReferencePicker.jsx

@@ -43,7 +43,7 @@ export default function SpriteReferencePicker({ open, onClose, onSelect, exclude
       onClose={onClose}
       size="3xl"
       usePortal
-      panelClassName="bg-port-card border border-port-border rounded-xl max-h-[85vh] flex flex-col"
+      panelClassName="bg-port-card border border-port-border rounded-xl flex flex-col"
       ariaLabel="Pick a reference sprite"
     >
       <div className="flex items-center justify-between gap-3 p-3 border-b border-port-border">