fix: add shared ChatPane wrapper for composer overlay layout

Author: Dimillian

src/features/layout/components/ChatPane.tsx

@@ -0,0 +1,58 @@
+import { useEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode } from "react";
+
+type ChatPaneProps = {
+  messagesNode: ReactNode;
+  composerNode: ReactNode;
+  className?: string;
+};
+
+export function ChatPane({ messagesNode, composerNode, className }: ChatPaneProps) {
+  const composerRef = useRef<HTMLDivElement | null>(null);
+  const [composerHeight, setComposerHeight] = useState(0);
+
+  useEffect(() => {
+    if (!composerNode) {
+      setComposerHeight(0);
+      return;
+    }
+
+    const node = composerRef.current;
+    if (!node) {
+      return;
+    }
+
+    const updateComposerHeight = () => {
+      setComposerHeight(Math.ceil(node.getBoundingClientRect().height));
+    };
+
+    updateComposerHeight();
+
+    const observer = new ResizeObserver(() => {
+      updateComposerHeight();
+    });
+    observer.observe(node);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [composerNode]);
+
+  const paneStyle = useMemo(
+    () =>
+      ({
+        ["--composer-overlay-height" as string]: `${composerHeight}px`,
+      }) satisfies CSSProperties,
+    [composerHeight],
+  );
+
+  return (
+    <div className={`chat-pane${className ? ` ${className}` : ""}`} style={paneStyle}>
+      <div className="chat-pane-messages">{messagesNode}</div>
+      {composerNode ? (
+        <div className="chat-pane-composer" ref={composerRef}>
+          {composerNode}
+        </div>
+      ) : null}
+    </div>
+  );
+}

src/features/layout/components/DesktopLayout.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, type MouseEvent, type ReactNode } from "react";
 import { MainTopbar } from "../../app/components/MainTopbar";
+import { ChatPane } from "./ChatPane";
 
 type CenterMode = "chat" | "diff";
 
@@ -108,6 +109,7 @@ export function DesktopLayout({
 }: DesktopLayoutProps) {
   const diffLayerRef = useRef<HTMLDivElement | null>(null);
   const chatLayerRef = useRef<HTMLDivElement | null>(null);
+  const chatPaneNode = <ChatPane messagesNode={messagesNode} composerNode={composerNode} />;
   const diffLayerActive = isActiveLayer(centerMode, "diff");
   const chatLayerActive = isActiveLayer(centerMode, "chat");
   const showDiffViewer = shouldRenderDiffViewer({
@@ -168,7 +170,7 @@ export function DesktopLayout({
                     })}
                     ref={chatLayerRef}
                   >
-                    {messagesNode}
+                    {chatPaneNode}
                   </div>
                   <div
                     className="content-split-resizer"
@@ -210,7 +212,7 @@ export function DesktopLayout({
                     aria-hidden={!splitChatDiffView ? !chatLayerActive : undefined}
                     ref={chatLayerRef}
                   >
-                    {messagesNode}
+                    {chatPaneNode}
                   </div>
                 </>
               )}
@@ -235,8 +237,6 @@ export function DesktopLayout({
               />
               <div className="right-panel-bottom">{planPanelNode}</div>
             </div>
-
-            {composerNode}
             {terminalDockNode}
             {debugPanelNode}
           </>

src/features/layout/components/PhoneLayout.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import { MainTopbar } from "../../app/components/MainTopbar";
+import { ChatPane } from "./ChatPane";
 
 type PhoneLayoutProps = {
   approvalToastsNode: ReactNode;
@@ -60,8 +61,9 @@ export function PhoneLayout({
                 actionsNode={topbarActionsNode}
                 className="compact-topbar"
               />
-              <div className="content compact-content">{messagesNode}</div>
-              {composerNode}
+              <div className="content compact-content">
+                <ChatPane messagesNode={messagesNode} composerNode={composerNode} />
+              </div>
             </>
           ) : (
             compactEmptyCodexNode

src/features/layout/components/TabletLayout.tsx

@@ -1,5 +1,6 @@
 import type { MouseEvent, ReactNode } from "react";
 import { MainTopbar } from "../../app/components/MainTopbar";
+import { ChatPane } from "./ChatPane";
 
 type TabletLayoutProps = {
   tabletNavNode: ReactNode;
@@ -64,10 +65,9 @@ export function TabletLayout({
               className="tablet-topbar"
             />
             {tabletTab === "codex" && (
-              <>
-                <div className="content tablet-content">{messagesNode}</div>
-                {composerNode}
-              </>
+              <div className="content tablet-content">
+                <ChatPane messagesNode={messagesNode} composerNode={composerNode} />
+              </div>
             )}
             {tabletTab === "git" && (
               <div className="tablet-git">

src/styles/compact-phone.css

@@ -37,16 +37,12 @@
 }
 
 .app.layout-phone .messages-full {
-  padding: 12px 16px 12px;
+  padding: 12px 16px calc(12px + var(--composer-overlay-height, 0px));
 }
 
 .app.layout-phone .composer {
-  position: sticky;
-  bottom: 0;
-  z-index: 2;
   padding: 10px 12px calc(10px + var(--phone-composer-safe-bottom, 0px));
   border-top: 1px solid var(--border-subtle);
-  backdrop-filter: blur(18px) saturate(1.1);
 }
 
 html[data-mobile-composer-focus="true"] .app.layout-phone {

src/styles/compact-tablet.css

@@ -101,7 +101,7 @@
 }
 
 .app.layout-tablet .messages-full {
-  padding: 12px 20px 16px;
+  padding: 12px 20px calc(16px + var(--composer-overlay-height, 0px));
 }
 
 .app.layout-tablet .composer {

src/styles/composer.css

@@ -6,6 +6,8 @@
   padding: 10px var(--main-panel-padding) 20px;
   border-top: 1px solid var(--cm-border-default);
   background: var(--cm-surface-composer);
+  backdrop-filter: blur(18px) saturate(1.1);
+  -webkit-backdrop-filter: blur(18px) saturate(1.1);
   grid-column: 1;
   grid-row: 3;
 }
@@ -15,6 +17,11 @@
   margin-inline: auto;
 }
 
+.app.reduced-transparency .composer {
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
 .composer-queue {
   display: flex;
   flex-direction: column;

src/styles/main.css

@@ -921,6 +921,35 @@
     );
 }
 
+.chat-pane {
+  --composer-overlay-height: 0px;
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+}
+
+.chat-pane-messages {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+}
+
+.chat-pane-composer {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.chat-pane-composer > .composer {
+  pointer-events: auto;
+}
+
 .content-split {
   position: relative;
 }

src/styles/messages.css

@@ -9,7 +9,7 @@
 .messages-full {
   background: transparent;
   border-radius: 0;
-  padding: 14px var(--main-panel-padding) 18px;
+  padding: 14px var(--main-panel-padding) calc(18px + var(--composer-overlay-height, 0px));
   border: none;
 }