fix(web): prevent top banner from hiding the chat prompt (#1259)

* fix(web): prevent top banner from pushing the chat prompt off-screen

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feedback

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-authored-by: Brendan Kellam <brendan@sourcebot.dev>

Author: 3 people

packages/web/src/app/(app)/components/banners/bannerHeightObserver.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { useEffect, useRef } from "react";
+
+const BANNER_HEIGHT_VAR = '--banner-height';
+
+/**
+ * Measures the rendered height of the top banner and exposes it as the
+ * `--banner-height` CSS variable on the document root (0px when no banner is
+ * shown). Viewport-based layouts (e.g. the chat thread's `calc(100vh - ...)`
+ * sizing) subtract this so they don't overflow when a banner is present.
+ */
+export function BannerHeightObserver({ children }: { children: React.ReactNode }) {
+    const ref = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const element = ref.current;
+        if (!element) {
+            return;
+        }
+
+        const root = document.documentElement;
+        const setHeight = (height: number) => {
+            root.style.setProperty(BANNER_HEIGHT_VAR, `${height}px`);
+        };
+
+        const resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                setHeight(entry.contentRect.height);
+            }
+        });
+        resizeObserver.observe(element);
+
+        return () => {
+            resizeObserver.disconnect();
+            root.style.setProperty(BANNER_HEIGHT_VAR, '0px');
+        };
+    }, []);
+
+    return <div ref={ref}>{children}</div>;
+}

packages/web/src/app/(app)/layout.tsx

@@ -26,6 +26,7 @@ import { LogoutEscapeHatch } from "@/app/components/logoutEscapeHatch";
 import { GitHubStarToast } from "./components/githubStarToast";
 import { getLinkedAccounts } from "@/ee/features/sso/actions";
 import { BannerSlot } from "./components/banners/bannerSlot";
+import { BannerHeightObserver } from "./components/banners/bannerHeightObserver";
 import { getPermissionSyncStatus } from "../api/(server)/ee/permissionSyncStatus/api";
 import { OrgRole } from "@sourcebot/db";
 import { ServiceErrorException } from "@/lib/serviceError";
@@ -185,15 +186,17 @@ export default async function Layout(props: LayoutProps) {
                             {sidebar}
                             <div className="flex-1 min-h-0 flex flex-col pt-2 pb-2 pr-2 pl-2 md:pl-0">
                                 <div className="flex-1 min-h-0 bg-background flex flex-col border border-[#e6e6e6] dark:border-[#1d1d1f] rounded-xl overflow-hidden">
-                                    <BannerSlot
-                                        role={role}
-                                        license={license}
-                                        offlineLicense={offlineLicense}
-                                        hasPermissionSyncEntitlement={hasPermissionSyncEntitlement}
-                                        hasPendingFirstSync={hasPendingFirstSync}
-                                        currentVersion={SOURCEBOT_VERSION}
-                                        latestVersion={latestVersion}
-                                    />
+                                    <BannerHeightObserver>
+                                        <BannerSlot
+                                            role={role}
+                                            license={license}
+                                            offlineLicense={offlineLicense}
+                                            hasPermissionSyncEntitlement={hasPermissionSyncEntitlement}
+                                            hasPendingFirstSync={hasPendingFirstSync}
+                                            currentVersion={SOURCEBOT_VERSION}
+                                            latestVersion={latestVersion}
+                                        />
+                                    </BannerHeightObserver>
                                     <div className="flex-1 min-h-0 overflow-y-auto">
                                         {children}
                                     </div>

packages/web/src/app/globals.css

@@ -7,6 +7,7 @@
 @layer base {
   html {
     overflow-y: scroll;
+    --banner-height: 0px;
   }
 
   /* Hide scrollbar but keep functionality */
@@ -16,6 +17,7 @@
   }
 
   :root {
+    --banner-height: 0px;
     --background: hsl(0 0% 99%);
     --background-secondary: hsl(0, 0%, 98%);
     --foreground: hsl(37, 84%, 5%);

packages/web/src/ee/features/chat/components/chatThread/chatThreadListItem.tsx

@@ -174,7 +174,7 @@ const ChatThreadListItemComponent = forwardRef<HTMLDivElement, ChatThreadListIte
     }, [answerPart]);
 
     const rightPanelStyle: CSSProperties = useMemo(() => {
-        const maxHeight = 'calc(100vh - 215px)';
+        const maxHeight = 'calc(100vh - 215px - var(--banner-height, 0px))';
 
         return {
             height: leftPanelHeight ? `min(${leftPanelHeight}px, ${maxHeight})` : maxHeight,
@@ -323,7 +323,7 @@ const ChatThreadListItemComponent = forwardRef<HTMLDivElement, ChatThreadListIte
 
     return (
         <div
-            className="flex flex-col md:flex-row relative min-h-[calc(100vh-250px)]"
+            className="flex flex-col md:flex-row relative min-h-[calc(100vh-250px-var(--banner-height,0px))]"
             ref={ref}
         >
             <ResizablePanelGroup