From 93ea00d010fe0632d20bbd79301e104ee537c7ee Mon Sep 17 00:00:00 2001
From: Calvin Secrest <dev@calvinsecrest.com>
Date: Sat, 13 Sep 2025 18:44:57 -0400
Subject: [PATCH] fix: prevent input buttons overlap

---
 frontend/chat-ui/src/components/InputBox.jsx  | 25 ++++++++++++++++---
 .../chat-ui/src/components/ProfileMenu.jsx    |  5 +++-
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/frontend/chat-ui/src/components/InputBox.jsx b/frontend/chat-ui/src/components/InputBox.jsx
index 91af3f2..ee7fbce 100644
--- a/frontend/chat-ui/src/components/InputBox.jsx
+++ b/frontend/chat-ui/src/components/InputBox.jsx
@@ -74,15 +74,27 @@ export default function InputBox() {
         className="hidden"
         onChange={(e) => handleFile(e.target.files[0])}
       />
-      <button onClick={() => fileInputRef.current?.click()} className="p-2" title="Attach" disabled={pending}>
+      <button
+        onClick={() => fileInputRef.current?.click()}
+        className="p-2 flex-shrink-0"
+        title="Attach"
+        disabled={pending}
+      >
         📎
       </button>
       {file && (
         <span className="text-sm" title={file.name}>{file.name}</span>
       )}
-      <button onClick={voice} className="p-2" title="Voice input" disabled={pending}>🎤</button>
+      <button
+        onClick={voice}
+        className="p-2 flex-shrink-0"
+        title="Voice input"
+        disabled={pending}
+      >
+        🎤
+      </button>
       <textarea
-        className="flex-1 border rounded p-2"
+        className="flex-1 min-w-0 border rounded p-2"
         rows={1}
         value={text}
         onChange={(e) => setText(e.target.value)}
@@ -95,7 +107,12 @@ export default function InputBox() {
         aria-label="Chat input"
         disabled={pending}
       />
-      <button onClick={send} className="p-2" title="Send" disabled={pending}>
+      <button
+        onClick={send}
+        className="p-2 flex-shrink-0"
+        title="Send"
+        disabled={pending}
+      >
         📨
       </button>
     </div>
diff --git a/frontend/chat-ui/src/components/ProfileMenu.jsx b/frontend/chat-ui/src/components/ProfileMenu.jsx
index badefea..34636f2 100644
--- a/frontend/chat-ui/src/components/ProfileMenu.jsx
+++ b/frontend/chat-ui/src/components/ProfileMenu.jsx
@@ -9,7 +9,10 @@ export default function ProfileMenu() {
   const toggleMemory = () => dispatch({ type: 'TOGGLE_MEMORY' });
 
   return (
-    <div className="absolute bottom-2 left-2">
+    <div
+      className="fixed bottom-2 transition-all"
+      style={{ left: state.sidebarOpen ? '15.5rem' : '0.5rem' }}
+    >
       <button className="p-2 rounded-full" onClick={() => setOpen((o) => !o)} title="Profile">
         ⚙️
       </button>