fix(amicode): sessions flyout — 'Show all' scrolls, nothing overlaps; panel matches the defaults capsule

packages/app/src/pages/home.tsx

@@ -19,7 +19,6 @@ import { createStore } from "solid-js/store"
 import { useQuery } from "@tanstack/solid-query"
 import { Button } from "@opencode-ai/ui/button"
 import { Logo } from "@opencode-ai/ui/logo"
-import { ScrollView } from "@opencode-ai/ui/scroll-view"
 import { ProjectAvatar } from "@opencode-ai/ui/v2/project-avatar-v2"
 import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
 import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
@@ -819,8 +818,14 @@ function HomeDesign() {
               {/* Sessions flyout (spec T3.3): servers + projects (all existing
                   affordances preserved via HomeProjectColumn) above the
                   search + grouped sessions list. */}
+              {/* Panel styling mirrors the defaults capsule popover
+                  (amicode-defaults-pop): bg-base surface, same floating
+                  shadow, 14px padding, 12px gap, dialog semantics. Width and
+                  max-height stay flyout-specific — the list needs the room. */}
               <div
                 data-slot="amicode-sessions-flyout"
+                role="dialog"
+                aria-label={language.t("sidebar.project.recentSessions")}
                 style={{
                   position: "absolute",
                   right: "0",
@@ -830,13 +835,13 @@ function HomeDesign() {
                   "max-height": "min(70vh, 680px)",
                   display: "flex",
                   "flex-direction": "column",
-                  gap: "10px",
+                  gap: "12px",
                   overflow: "hidden auto",
                   border: "1px solid var(--v2-border-border-base)",
                   "border-radius": "10px",
-                  background: "var(--v2-background-bg-layer-01)",
-                  "box-shadow": "var(--v2-elevation-raised, 0 10px 32px rgba(0,0,0,0.28))",
-                  padding: "12px 14px",
+                  background: "var(--v2-background-bg-base)",
+                  "box-shadow": "0 14px 40px -18px rgba(0, 0, 0, 0.55)",
+                  padding: "14px",
                 }}
               >
                 <HomeProjectColumn
@@ -884,7 +889,13 @@ function HomeDesign() {
                     onClose={closeSearch}
                     onSelect={selectSearchSession}
                   />
-                  <ScrollView class="mt-3 min-h-0 flex-1">
+                  {/* The scroll container must be this element itself (used flex
+                      size + overflow-y), NOT ScrollView: its viewport needs
+                      height:100%, and percentage heights never resolve under the
+                      flyout's max-height-only auto-height chain — the viewport
+                      inflates to content size and the root just clips it. Same
+                      pattern as the project list / search results lists. */}
+                  <div class="min-h-0 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
                     <div class="pt-3 flex flex-col gap-6">
                       <Show
                         when={!sessionLoad.isLoading}
@@ -967,7 +978,7 @@ function HomeDesign() {
                         </Show>
                       </Show>
                     </div>
-                  </ScrollView>
+                  </div>
                 </section>
               </div>
             </Show>
@@ -1074,20 +1085,31 @@ function HomeProjectColumn(props: {
   const dialog = useDialog()
   const controller = useServerManagementController({ navigateOnAdd: false })
   return (
-    <aside class="isolate flex min-h-0 min-w-0 flex-col gap-4" aria-label={props.language.t("home.projects")}>
-      <div class="mt-2 flex h-7 min-w-0 items-center justify-between pl-1.5" classList={{ "mt-0": props.compact }}>
+    // Flyout mode: never let the sessions list below squeeze this column into
+    // visible overflow — keep natural height (capped, scrolling internally if
+    // a pathological project count exceeds the cap).
+    <aside
+      class="isolate flex min-h-0 min-w-0 flex-col"
+      classList={{
+        "gap-4": !props.compact,
+        "gap-3 shrink-0 max-h-[38vh] overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden": props.compact,
+      }}
+      aria-label={props.language.t("home.projects")}
+    >
+      <div class="flex h-7 min-w-0 items-center justify-between" classList={{ "mt-2 pl-1.5": !props.compact }}>
         {/* amicode: brand block replaces the bare "Projects" label — the lone
             letter-avatar project row underneath read as a stray "A amicode".
             In flyout mode (compact) the strip owns the brand: show a quiet
             "Projects" label instead. */}
         <Show
           when={!props.compact}
           fallback={
+            // Same section-label spec as the capsule popover's "Solver".
             <span
               style={{
                 "font-size": "10px",
                 "font-weight": "700",
-                "letter-spacing": "0.1em",
+                "letter-spacing": "0.08em",
                 "text-transform": "uppercase",
                 color: "var(--v2-text-text-faint)",
               }}
@@ -1494,7 +1516,7 @@ function HomeSessionSearch(props: {
   )
 
   return (
-    <div class="ml-4 mr-2 w-[calc(100%_-_24px)]">
+    <div class="w-full shrink-0">
       <div ref={root} data-component="home-session-search" class="relative z-10 w-full">
         <Show when={props.open}>
           <div