fix(ui): keep import wizard within viewport

Constrain the import wizard height to the viewport, keep the agent selection actions visible, and make long agent lists scroll within the modal. Also scope a slimmer scrollbar to the sidebar navigation.

Tests: bun run typecheck
Codex: fixed the modal overflow and sidebar scrollbar styling

Author: beautyfree

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 dark:bg-black/40 animate-backdrop-in"
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/25 p-4 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="w-full max-w-lg rounded-3xl p-6 space-y-4 outline-none animate-modal-in glass-elevated"
+        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"
         onClick={(e) => e.stopPropagation()}
       >
         {/* Header */}
@@ -530,7 +530,7 @@ export default function ImportWizard({ mode, initialLocalPath, initialProjectPat
 
         {/* Step: Select Agents */}
         {step === "agents" && (
-          <div className="space-y-3">
+          <div className="flex min-h-0 flex-1 flex-col space-y-3">
             <p className="text-xs text-muted-foreground">
               {t("repos.selectAgents")}
             </p>
@@ -553,7 +553,7 @@ export default function ImportWizard({ mode, initialLocalPath, initialProjectPat
                       : t("repos.selectAll")}
                   </button>
                 </div>
-                <div className="space-y-0.5">
+                <div className="-mx-1 min-h-0 flex-1 space-y-0.5 overflow-y-auto px-1">
                   {detectedAgents.map((agent) => (
                     <AgentCheckItem
                       key={agent.slug}

src/mainview/components/Layout.tsx

@@ -220,7 +220,7 @@ function LayoutInner({
               <InsetScrollArea scroll={false} className="flex-1">
                 <nav
                   aria-label="Main navigation"
-                  className="flex h-full min-h-0 flex-col gap-0.5 overflow-y-auto px-3 pb-2"
+                  className="sidebar-scrollbar flex h-full min-h-0 flex-col gap-0.5 overflow-y-auto px-3 pb-2"
                 >
                   <h2 className="mb-1 px-3 text-[10px] font-medium uppercase tracking-wider text-muted-foreground/50">
                     {t('sidebar.workspace')}

src/mainview/index.css

@@ -407,6 +407,26 @@ html.skiller-macos-vibrancy.dark .glass-inset {
   background: rgba(255, 255, 255, 0.28);
 }
 
+.sidebar-scrollbar::-webkit-scrollbar {
+  width: 2px;
+}
+
+.sidebar-scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.sidebar-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.18);
+}
+
+.dark .sidebar-scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.12);
+}
+
+.dark .sidebar-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.22);
+}
+
 /* Firefox — thinnest built-in track (no per-px width API) */
 html {
   scrollbar-width: thin;
@@ -886,4 +906,4 @@ html.skiller-macos-vibrancy.dark .glass-surface-tint.glass-stat {
       rgba(255, 255, 255, 0.18) 0%,
       rgba(255, 255, 255, 0.06) 40%,
       transparent 70%);
-}
+}