From dc16e0c65b485ee07f1f0c9420e665b4added534 Mon Sep 17 00:00:00 2001
From: Lee Jackson <130007945+Imagineer99@users.noreply.github.com>
Date: Thu, 9 Apr 2026 14:00:56 +0100
Subject: [PATCH] Studio: keep chat input visible and fix compare pane clipping
 (#4924)

* fix(chat): sticky composer bar in thread

* fix(chat): fix compare pane clipping

* fix(chat): tighten scroll-to-bottom placement and compare footer spacing

* Fix TypeScript build break and clean up ViewportFooter classes

- Remove unused `compact` prop from ThreadScrollToBottom call site
  (component is FC with no props, passing it caused TS2322)
- Extract shared classes (sticky, bottom-0, z-20, bg-transparent) from
  ternary branches into the unconditional className string
- Restore `relative` on normal-mode footer so the inner absolute
  bg-background strip has a positioning context
- Remove redundant md:pb-3 / md:pb-4 (same value as base pb-3 / pb-4)
- Remove no-op `sticky bottom-0` from SharedComposer wrapper in both
  LoraCompareContent and GeneralCompareContent (flex layout with
  shrink-0 already pins it at the bottom; parent has no scrollable
  overflow for sticky to bind to)
- Fix truncated comment on pointer-events rationale

---------

Co-authored-by: Daniel Han <danielhanchen@gmail.com>
---
 .../src/components/assistant-ui/thread.tsx    | 25 ++++++++++++++-----
 .../frontend/src/features/chat/chat-page.tsx  |  4 +--
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/studio/frontend/src/components/assistant-ui/thread.tsx b/studio/frontend/src/components/assistant-ui/thread.tsx
index 4db0eda0ad..0d99654b89 100644
--- a/studio/frontend/src/components/assistant-ui/thread.tsx
+++ b/studio/frontend/src/components/assistant-ui/thread.tsx
@@ -89,14 +89,27 @@ export const Thread: FC<{ hideComposer?: boolean; hideWelcome?: boolean }> = ({
           }}
         />
 
-        <ThreadPrimitive.ViewportFooter className={cn(
-          "aui-thread-viewport-footer sticky bottom-0 z-20 mt-auto flex w-full flex-col gap-4 overflow-visible pb-4 md:pb-4",
-          hideComposer ? "bg-background" : "relative bg-transparent",
-        )}>
+        <ThreadPrimitive.ViewportFooter
+          className={cn(
+            "aui-thread-viewport-footer sticky bottom-0 z-20 mt-auto flex w-full flex-col overflow-visible bg-transparent",
+            hideComposer ? "gap-2" : "gap-4",
+            // Compare: pointer-events pass-through so messages behind footer stay clickable
+            hideComposer
+              ? "pointer-events-none pb-3"
+              : "relative pb-4",
+          )}
+        >
           {!hideComposer && (
             <div className="pointer-events-none absolute inset-x-0 bottom-0 h-4 bg-background" aria-hidden />
           )}
-          <ThreadScrollToBottom />
+          <div
+            className={cn(
+              "flex justify-center",
+              hideComposer && "pointer-events-auto",
+            )}
+          >
+            <ThreadScrollToBottom />
+          </div>
           <AuiIf condition={({ thread }) => !thread.isEmpty}>
             {!hideComposer && <ComposerAnimated />}
           </AuiIf>
@@ -112,7 +125,7 @@ const ThreadScrollToBottom: FC = () => {
       <TooltipIconButton
         tooltip="Scroll to bottom"
         variant="outline"
-        className="aui-thread-scroll-to-bottom absolute -top-12 z-10 self-center rounded-full p-4 disabled:invisible dark:bg-background dark:hover:bg-accent"
+        className="aui-thread-scroll-to-bottom absolute -top-6 z-10 self-center rounded-full p-4 disabled:invisible dark:bg-background dark:hover:bg-accent"
       >
         <ArrowDownIcon />
       </TooltipIconButton>
diff --git a/studio/frontend/src/features/chat/chat-page.tsx b/studio/frontend/src/features/chat/chat-page.tsx
index cf1ba11d7b..ebaab75c0f 100644
--- a/studio/frontend/src/features/chat/chat-page.tsx
+++ b/studio/frontend/src/features/chat/chat-page.tsx
@@ -251,7 +251,7 @@ const LoraCompareContent = memo(function LoraCompareContent({
             </div>
           </div>
         </div>
-        <div className="mx-auto w-full max-w-4xl px-4 py-4">
+        <div className="z-20 mx-auto w-full max-w-4xl shrink-0 border-t border-border/60 bg-background px-4 pt-2 pb-4">
           <SharedComposer handlesRef={handlesRef} />
         </div>
       </div>
@@ -387,7 +387,7 @@ const GeneralCompareContent = memo(function GeneralCompareContent({
             </div>
           </div>
         </div>
-        <div className="mx-auto w-full max-w-4xl px-4 py-4">
+        <div className="z-20 mx-auto w-full max-w-4xl shrink-0 border-t border-border/60 bg-background px-4 pt-2 pb-4">
           <SharedComposer
             handlesRef={handlesRef}
             model1={model1}