ui: avoid session review header clipping

Move the session review header outside the scroll viewport and drop strict containment so shadows can render without being cropped.

packages/ui/src/components/session-review.css

@@ -3,11 +3,10 @@
   flex-direction: column;
   gap: 0px;
   height: 100%;
-  overflow-y: auto;
-  scrollbar-width: none;
-  contain: strict;
-  &::-webkit-scrollbar {
-    display: none;
+
+  [data-slot="session-review-scroll"] {
+    flex: 1 1 auto;
+    min-height: 0;
   }
 
   .scroll-view__viewport {
@@ -21,8 +20,6 @@
   }
 
   [data-slot="session-review-header"] {
-    position: sticky;
-    top: 0;
     z-index: 120;
     background-color: var(--background-stronger);
     height: 40px;
@@ -63,7 +60,7 @@
   }
 
   [data-component="sticky-accordion-header"] {
-    --sticky-accordion-top: 40px;
+    --sticky-accordion-top: 0px;
   }
 
   [data-slot="session-review-accordion-item"][data-selected]

packages/ui/src/components/session-review.tsx

@@ -554,20 +554,7 @@ export const SessionReview = (props: SessionReviewProps) => {
   }
 
   return (
-    <ScrollView
-      data-component="session-review"
-      viewportRef={(el) => {
-        scroll = el
-        props.scrollRef?.(el)
-      }}
-      onScroll={props.onScroll as any}
-      onKeyDown={handleReviewKeyDown}
-      classList={{
-        ...(props.classList ?? {}),
-        [props.classes?.root ?? ""]: !!props.classes?.root,
-        [props.class ?? ""]: !!props.class,
-      }}
-    >
+    <div data-component="session-review" class={props.class} classList={props.classList}>
       <div data-slot="session-review-header" class={props.classes?.header}>
         <div data-slot="session-review-title">{props.title ?? i18n.t("ui.sessionReview.title")}</div>
         <div data-slot="session-review-actions">
@@ -599,6 +586,19 @@ export const SessionReview = (props: SessionReviewProps) => {
           {props.actions}
         </div>
       </div>
+
+      <ScrollView
+        data-slot="session-review-scroll"
+        viewportRef={(el) => {
+          scroll = el
+          props.scrollRef?.(el)
+        }}
+        onScroll={props.onScroll as any}
+        onKeyDown={handleReviewKeyDown}
+        classList={{
+          [props.classes?.root ?? ""]: !!props.classes?.root,
+        }}
+      >
         <Show when={searchOpen()}>
           <FileSearchBar
             pos={searchPos}
@@ -618,6 +618,7 @@ export const SessionReview = (props: SessionReviewProps) => {
             onNext={() => navigateSearch(1)}
           />
         </Show>
+
         <div data-slot="session-review-container" class={props.classes?.container}>
           <Show when={hasDiffs()} fallback={props.empty}>
             <Accordion multiple value={open()} onChange={handleChange}>
@@ -646,7 +647,8 @@ export const SessionReview = (props: SessionReviewProps) => {
                     return changedLines() > MAX_DIFF_CHANGED_LINES
                   })
 
-                const isAdded = () => item().status === "added" || (beforeText().length === 0 && afterText().length > 0)
+                  const isAdded = () =>
+                    item().status === "added" || (beforeText().length === 0 && afterText().length > 0)
                   const isDeleted = () =>
                     item().status === "deleted" || (afterText().length === 0 && beforeText().length > 0)
 
@@ -895,5 +897,6 @@ export const SessionReview = (props: SessionReviewProps) => {
           </Show>
         </div>
       </ScrollView>
+    </div>
   )
 }