From 20aa590a7aa558eb735d820160ddbf86f4bae5e0 Mon Sep 17 00:00:00 2001
From: Hikari <hikari@nhcarrigan.com>
Date: Sat, 7 Feb 2026 18:52:48 -0800
Subject: [PATCH] fix: improve responsive design for navigation and status bars

- Add flex-wrap to StatusBar icon container to prevent overflow
- Add responsive media queries to hide button text on small screens (< 640px)
- Stack StatusBar sections vertically on mobile (< 768px)
- Add flex-wrap to InputBar controls to prevent bottom status info cutoff
- Make control buttons show icons only on small screens
- All buttons now use flex-shrink: 0 to prevent unwanted squishing
- Ensures Connect button, clock, and CLI version remain visible at all screen sizes
---
 src/lib/components/InputBar.svelte  | 13 +++++++++++
 src/lib/components/StatusBar.svelte | 35 ++++++++++++++++++++++++++---
 2 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/InputBar.svelte b/src/lib/components/InputBar.svelte
index 907cddf..f911354 100644
--- a/src/lib/components/InputBar.svelte
+++ b/src/lib/components/InputBar.svelte
@@ -1071,6 +1071,7 @@ User: ${formattedMessage}`;
     display: flex;
     align-items: center;
     gap: 8px;
+    flex-wrap: wrap;
   }
 
   .control-button {
@@ -1087,6 +1088,18 @@ User: ${formattedMessage}`;
     transition: all 0.2s;
     font-size: 14px;
     white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  /* Hide button text on smaller screens, show icons only */
+  @media (max-width: 640px) {
+    .control-button span {
+      display: none;
+    }
+    .control-button {
+      padding: 10px;
+      min-width: 40px;
+    }
   }
 
   .control-button:hover {
diff --git a/src/lib/components/StatusBar.svelte b/src/lib/components/StatusBar.svelte
index 79e27f5..3230eaf 100644
--- a/src/lib/components/StatusBar.svelte
+++ b/src/lib/components/StatusBar.svelte
@@ -381,16 +381,16 @@
     {/if}
   </div>
 
-  <div class="flex items-center gap-3">
+  <div class="flex items-center gap-2 flex-wrap min-w-0">
     {#if streamerModeActive}
       <div
-        class="w-2.5 h-2.5 rounded-full bg-red-500 animate-pulse"
+        class="w-2.5 h-2.5 rounded-full bg-red-500 animate-pulse shrink-0"
         title="Streamer mode active (Ctrl+Shift+S to toggle)"
       ></div>
     {/if}
     <button
       onclick={() => (showProfile = true)}
-      class="p-1 text-gray-500 icon-trans-hover"
+      class="p-1 text-gray-500 icon-trans-hover shrink-0"
       title="Profile"
     >
       <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -744,3 +744,32 @@
 {#if showMcpPanel}
   <McpManagementPanel onClose={() => (showMcpPanel = false)} />
 {/if}
+
+<style>
+  /* Responsive status bar styling */
+  .status-bar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  /* Make all icon buttons shrink but not grow */
+  .status-bar button {
+    flex-shrink: 0;
+  }
+
+  /* Hide version text on very small screens */
+  @media (max-width: 640px) {
+    .status-bar button span:last-of-type {
+      display: none;
+    }
+  }
+
+  /* Stack left and right sections on very small screens */
+  @media (max-width: 768px) {
+    .status-bar {
+      flex-direction: column;
+      gap: 0.75rem;
+    }
+  }
+</style>