From 98b36439f59c573ae6b9a728fc33928b7a837940 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Efe=20=C3=87elik?= <efecelik0@protonmail.com>
Date: Wed, 23 Sep 2026 10:45:17 +0300
Subject: [PATCH] Fix last message hidden behind floating prompt bar

The messages list used a fixed pb-20 bottom padding while the floating
prompt input bar's actual height varies (queued prompts, multi-line
input, etc.), so the last message could end up rendered behind the bar.

Measure the prompt bar's real height with a ResizeObserver and use it
to size the list's bottom padding dynamically.
---
 src/components/ClaudeCodeSession.tsx | 30 +++++++++++++++++++++++-----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/components/ClaudeCodeSession.tsx b/src/components/ClaudeCodeSession.tsx
index f0f164f21..97d176373 100644
--- a/src/components/ClaudeCodeSession.tsx
+++ b/src/components/ClaudeCodeSession.tsx
@@ -141,6 +141,8 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
   const unlistenRefs = useRef<UnlistenFn[]>([]);
   const hasActiveSessionRef = useRef(false);
   const floatingPromptRef = useRef<FloatingPromptInputRef>(null);
+  const floatingPromptBarRef = useRef<HTMLDivElement>(null);
+  const [floatingPromptBarHeight, setFloatingPromptBarHeight] = useState(0);
   const queuedPromptsRef = useRef<Array<{ id: string; prompt: string; model: "sonnet" | "opus" }>>([]);
   const isMountedRef = useRef(true);
   const isListeningRef = useRef(false);
@@ -1218,12 +1220,27 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
     };
   }, [effectiveSession, projectPath]);
 
+  // Keep the message list's bottom padding in sync with the floating prompt
+  // bar's real height so the last message never ends up hidden behind it.
+  useEffect(() => {
+    const barEl = floatingPromptBarRef.current;
+    if (!barEl) return;
+
+    const updateHeight = () => setFloatingPromptBarHeight(barEl.offsetHeight);
+    updateHeight();
+
+    const observer = new ResizeObserver(updateHeight);
+    observer.observe(barEl);
+    return () => observer.disconnect();
+  }, []);
+
   const messagesList = (
     <div
       ref={parentRef}
-      className="flex-1 overflow-y-auto relative pb-20"
+      className="flex-1 overflow-y-auto relative"
       style={{
         contain: 'strict',
+        paddingBottom: `${floatingPromptBarHeight + 24}px`,
       }}
     >
       <div
@@ -1516,10 +1533,13 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
             </motion.div>
           )}
 
-          <div className={cn(
-            "fixed bottom-0 left-0 right-0 transition-all duration-300 z-50",
-            showTimeline && "sm:right-96"
-          )}>
+          <div
+            ref={floatingPromptBarRef}
+            className={cn(
+              "fixed bottom-0 left-0 right-0 transition-all duration-300 z-50",
+              showTimeline && "sm:right-96"
+            )}
+          >
             <FloatingPromptInput
               ref={floatingPromptRef}
               onSend={handleSendPrompt}