fix(ui): keep permission dock buttons in view on long requests

Cap the dock with a measured max-height matching the available slot
under the session header, and make the patterns row a flex grid track
with min-height: 0 so long content scrolls inside the dock with a fading
bottom mask instead of pushing the action buttons off-screen.

Author: Arcadi4

packages/app/src/pages/session/composer/session-permission-dock.tsx

@@ -1,8 +1,10 @@
-import { For, Show } from "solid-js"
+import { For, Show, onCleanup, onMount } from "solid-js"
 import type { PermissionRequest } from "@opencode-ai/sdk/v2"
 import { Button } from "@opencode-ai/ui/button"
 import { DockPrompt } from "@opencode-ai/ui/dock-prompt"
 import { Icon } from "@opencode-ai/ui/icon"
+import { makeEventListener } from "@solid-primitives/event-listener"
+import { createResizeObserver } from "@solid-primitives/resize-observer"
 import { useLanguage } from "@/context/language"
 
 export function SessionPermissionDock(props: {
@@ -19,9 +21,57 @@ export function SessionPermissionDock(props: {
     return value
   }
 
+  let root: HTMLDivElement | undefined
+
+  const measure = () => {
+    if (!root) return
+
+    const scroller = document.querySelector(".scroll-view__viewport")
+    const head = scroller instanceof HTMLElement ? scroller.firstElementChild : undefined
+    const top =
+      head instanceof HTMLElement && head.classList.contains("sticky") ? head.getBoundingClientRect().bottom : 0
+    if (!top) {
+      root.style.removeProperty("--permission-prompt-max-height")
+      return
+    }
+
+    const dock = root.closest('[data-component="session-prompt-dock"]')
+    if (!(dock instanceof HTMLElement)) return
+
+    const dockBottom = dock.getBoundingClientRect().bottom
+    const below = Math.max(0, dockBottom - root.getBoundingClientRect().bottom)
+    const gap = 8
+    const max = Math.max(240, Math.floor(dockBottom - top - gap - below))
+    root.style.setProperty("--permission-prompt-max-height", `${max}px`)
+  }
+
+  onMount(() => {
+    let raf: number | undefined
+    const update = () => {
+      if (raf !== undefined) cancelAnimationFrame(raf)
+      raf = requestAnimationFrame(() => {
+        raf = undefined
+        measure()
+      })
+    }
+
+    update()
+
+    makeEventListener(window, "resize", update)
+
+    const dock = root?.closest('[data-component="session-prompt-dock"]')
+    const scroller = document.querySelector(".scroll-view__viewport")
+    createResizeObserver([dock, scroller], update)
+
+    onCleanup(() => {
+      if (raf !== undefined) cancelAnimationFrame(raf)
+    })
+  })
+
   return (
     <DockPrompt
       kind="permission"
+      ref={(el) => (root = el)}
       header={
         <div data-slot="permission-row" data-variant="header">
           <span data-slot="permission-icon">

packages/ui/src/components/message-part.css

@@ -7,6 +7,24 @@
   gap: 12px;
 }
 
+@property --permission-bottom-fade {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@keyframes permission-scroll-fade {
+  0% {
+    --permission-bottom-fade: 24px;
+  }
+  90% {
+    --permission-bottom-fade: 24px;
+  }
+  100% {
+    --permission-bottom-fade: 0px;
+  }
+}
+
 [data-component="user-message"] {
   font-family: var(--font-family-sans);
   font-size: var(--font-size-base);
@@ -720,7 +738,7 @@
   flex-direction: column;
   gap: 0;
   min-height: 0;
-  max-height: 100dvh;
+  max-height: var(--permission-prompt-max-height, 100dvh);
 
   [data-slot="permission-body"] {
     display: flex;
@@ -746,6 +764,17 @@
     align-items: center;
   }
 
+  [data-slot="permission-row"]:has(> [data-slot="permission-patterns"]) {
+    flex: 1;
+    min-height: 0;
+    grid-template-rows: minmax(0, 1fr);
+    align-items: stretch;
+  }
+
+  [data-slot="permission-row"]:has(> [data-slot="permission-patterns"]) [data-slot="permission-spacer"] {
+    align-self: start;
+  }
+
   [data-slot="permission-icon"] {
     display: inline-flex;
     align-items: center;
@@ -792,6 +821,11 @@
     flex: 1;
     min-height: 0;
     overflow-y: auto;
+    overscroll-behavior: contain;
+    mask: linear-gradient(to bottom, #ffff calc(100% - var(--permission-bottom-fade)), #0000);
+    animation: permission-scroll-fade;
+    animation-timeline: --permission-scroll;
+    scroll-timeline: --permission-scroll y;
     scrollbar-width: none;
     -ms-overflow-style: none;