fix(ui): constrain modal layouts to viewport

Add shared modal shell and panel constraints so dialogs keep top and bottom breathing room and scroll internally when content is taller than the window.

Tests: bun run typecheck
Codex: audited existing dialogs and applied shared viewport-safe modal classes

Author: beautyfree

src/mainview/components/CloseConfirmDialog.tsx

@@ -42,9 +42,9 @@ export default function CloseConfirmDialog({ open, onDone }: Props) {
   if (!open) return null;
 
   return (
-    <div className="fixed inset-0 z-[100] flex items-center justify-center">
+    <div className="modal-shell fixed inset-0 z-[100] flex items-center justify-center">
       <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" onClick={onDone} />
-      <div className="relative z-10 w-80 rounded-2xl glass-panel p-5 space-y-4 shadow-xl border border-border/50">
+      <div className="modal-panel relative z-10 w-80 rounded-2xl glass-panel p-5 space-y-4 shadow-xl border border-border/50">
         <h2 className="text-sm font-[590]">{t("close.title")}</h2>
         <p className="text-xs text-muted-foreground leading-relaxed">
           {t("close.description")}

src/mainview/components/ImportWizard.tsx

@@ -248,7 +248,7 @@ export default function ImportWizard({ mode, initialLocalPath, initialProjectPat
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/25 p-4 dark:bg-black/40 animate-backdrop-in"
+      className="modal-shell fixed inset-0 z-50 flex items-center justify-center bg-black/25 dark:bg-black/40 animate-backdrop-in"
       role="presentation"
       onClick={busy ? undefined : handleClose}
     >
@@ -257,7 +257,7 @@ export default function ImportWizard({ mode, initialLocalPath, initialProjectPat
         tabIndex={-1}
         role="dialog"
         aria-modal="true"
-        className="flex max-h-[calc(100dvh-2rem)] w-full max-w-lg flex-col overflow-hidden rounded-3xl p-6 space-y-4 outline-none animate-modal-in glass-elevated"
+        className="modal-panel-flex flex w-full max-w-lg flex-col rounded-3xl p-6 space-y-4 outline-none animate-modal-in glass-elevated"
         onClick={(e) => e.stopPropagation()}
       >
         {/* Header */}

src/mainview/components/InstallToProjectPicker.tsx

@@ -44,13 +44,13 @@ export default function InstallToProjectPicker({ skillName, onInstall, onClose }
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/25 dark:bg-black/40 animate-backdrop-in"
+      className="modal-shell fixed inset-0 z-50 flex items-center justify-center bg-black/25 dark:bg-black/40 animate-backdrop-in"
       onClick={onClose}
     >
       <div
         role="dialog"
         aria-modal="true"
-        className="w-full max-w-md rounded-3xl p-6 space-y-4 outline-none animate-modal-in glass-elevated"
+        className="modal-panel w-full max-w-md rounded-3xl p-6 space-y-4 outline-none animate-modal-in glass-elevated"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex items-center justify-between">

src/mainview/components/OnboardingWizard.tsx

@@ -124,13 +124,13 @@ export default function OnboardingWizard({
 
 	return (
 		<div
-			className="fixed inset-0 z-50 flex items-center justify-center bg-black/25 dark:bg-black/40 animate-backdrop-in"
+			className="modal-shell fixed inset-0 z-50 flex items-center justify-center bg-black/25 dark:bg-black/40 animate-backdrop-in"
 			onClick={markDoneAndClose}
 		>
 			<div
 				role="dialog"
 				aria-modal="true"
-				className="w-full max-w-xl rounded-3xl p-6 outline-none animate-modal-in glass-elevated"
+				className="modal-panel w-full max-w-xl rounded-3xl p-6 outline-none animate-modal-in glass-elevated"
 				onClick={(e) => e.stopPropagation()}
 			>
 				<StepDots current={step} />

src/mainview/components/ProjectSkillDetailModal.tsx

@@ -73,7 +73,7 @@ export default function ProjectSkillDetailModal({ projectPath, skill, onClose }:
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/25 dark:bg-black/40 animate-backdrop-in"
+      className="modal-shell fixed inset-0 z-50 flex items-center justify-center bg-black/25 dark:bg-black/40 animate-backdrop-in"
       onClick={() => {
         if (dirty) return;
         onClose();
@@ -82,7 +82,7 @@ export default function ProjectSkillDetailModal({ projectPath, skill, onClose }:
       <div
         role="dialog"
         aria-modal="true"
-        className="flex h-[85vh] w-full max-w-3xl flex-col rounded-3xl outline-none animate-modal-in glass-elevated"
+        className="modal-panel-flex flex h-[min(85dvh,calc(100dvh-2rem))] w-full max-w-3xl flex-col rounded-3xl outline-none animate-modal-in glass-elevated"
         onClick={(e) => e.stopPropagation()}
       >
         {/* Header */}

src/mainview/index.css

@@ -380,6 +380,20 @@ html.skiller-macos-vibrancy.dark .glass-inset {
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.14);
 }
 
+.modal-shell {
+  padding: 1rem;
+}
+
+.modal-panel {
+  max-height: calc(100dvh - 2rem);
+  overflow-y: auto;
+}
+
+.modal-panel-flex {
+  max-height: calc(100dvh - 2rem);
+  overflow: hidden;
+}
+
 /* ─── Scrollbar (thin — WebKit/Electron) ─── */
 ::-webkit-scrollbar {
   width: 3px;

src/mainview/pages/Dashboard.tsx

@@ -514,7 +514,7 @@ function InstallGuideModal({
     ? `which ${agent.cli_command}`
     : "";
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+    <div className="modal-shell fixed inset-0 z-50 flex items-center justify-center">
       <div
         className="absolute inset-0 bg-[rgba(0,0,0,0.85)] animate-backdrop-in"
         aria-hidden
@@ -526,7 +526,7 @@ function InstallGuideModal({
         role="dialog"
         aria-modal="true"
         aria-labelledby="install-guide-dialog-title"
-        className="relative z-10 w-full max-w-lg rounded-3xl p-5 outline-none animate-modal-in glass-elevated"
+        className="modal-panel relative z-10 w-full max-w-lg rounded-3xl p-5 outline-none animate-modal-in glass-elevated"
       >
         <div className="mb-3 flex items-center justify-between">
           <h3 id="install-guide-dialog-title" className="text-sm font-[590]">
@@ -604,4 +604,3 @@ function CommandBlock({
     </div>
   );
 }
-

src/mainview/pages/Projects.tsx

@@ -829,13 +829,13 @@ function CopyFromInstalledPicker({
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/25 dark:bg-black/40 animate-backdrop-in"
+      className="modal-shell fixed inset-0 z-50 flex items-center justify-center bg-black/25 dark:bg-black/40 animate-backdrop-in"
       onClick={onClose}
     >
       <div
         role="dialog"
         aria-modal="true"
-        className="w-full max-w-lg rounded-3xl p-6 space-y-4 outline-none animate-modal-in glass-elevated"
+        className="modal-panel w-full max-w-lg rounded-3xl p-6 space-y-4 outline-none animate-modal-in glass-elevated"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex items-center justify-between">

src/mainview/pages/SkillsManager.tsx

@@ -2118,9 +2118,9 @@ function SkillNameConfirmDialog({
   const isUninstall = actionKind === "uninstall_all";
 
   return (
-    <div className="fixed inset-0 z-[320] flex items-center justify-center">
+    <div className="modal-shell fixed inset-0 z-[320] flex items-center justify-center">
       <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" onClick={onCancel} />
-      <div className="relative z-10 w-[min(32rem,calc(100vw-2rem))] rounded-2xl glass-panel border border-border/50 p-5 shadow-xl">
+      <div className="modal-panel relative z-10 w-[min(32rem,calc(100vw-2rem))] rounded-2xl glass-panel border border-border/50 p-5 shadow-xl">
         <div className="mb-2 flex items-center justify-between gap-2">
           <h2 className="text-sm font-[590]">
             {isUninstall ? t("skills.confirmUninstallTitle") : t("skills.confirmUnlinkTitle")}