Fix mobile header layout overflow

codebude · codebude · commit 7383e2adc58d · 2025-09-17T21:25:35.000Z
- Make header responsive with flex-wrap for mobile devices
- Search box now wraps to new row below logo/theme selector on small screens
- Added proper flex-shrink and width controls for responsive behavior
- Prevent text overflow with truncate class on title
diff --git a/public/index.html b/public/index.html
@@ -15,27 +15,27 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body class="bg-gray-100 font-sans flex flex-col h-screen dark:bg-gray-900 transition-colors">
-    <header class="bg-white text-gray-900 p-4 flex items-center justify-between dark:bg-gray-900 dark:text-white transition-colors border-b border-gray-200 dark:border-gray-700">
-        <button id="sidebar-toggle" onclick="toggleSidebar()" class="bg-gray-200 text-gray-900 text-xl p-2 hover:bg-gray-300 rounded transition-colors dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700" type="button">☰</button>
-        <div class="flex items-center space-x-3 ml-4">
-            <svg class="w-8 h-8" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <header class="bg-white text-gray-900 p-4 flex flex-wrap items-center justify-between gap-2 dark:bg-gray-900 dark:text-white transition-colors border-b border-gray-200 dark:border-gray-700">
+        <button id="sidebar-toggle" onclick="toggleSidebar()" class="bg-gray-200 text-gray-900 text-xl p-2 hover:bg-gray-300 rounded transition-colors dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 flex-shrink-0" type="button">☰</button>
+        <div class="flex items-center space-x-3 ml-4 min-w-0 flex-shrink">
+            <svg class="w-8 h-8 flex-shrink-0" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M8 6L24 6C25.1046 6 26 6.89543 26 8V24C26 25.1046 25.1046 26 24 26H8C6.89543 26 6 25.1046 6 24V8C6 6.89543 6.89543 6 8 6Z" fill="#60A5FA" stroke="#3B82F6" stroke-width="2"/>
                 <path d="M10 12L22 12" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>
                 <path d="M10 16L18 16" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" opacity="0.8"/>
                 <path d="M10 20L20 20" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
                 <path d="M14 10L18 14" stroke="#10B981" stroke-width="2" stroke-linecap="round"/>
                 <path d="M18 10L14 14" stroke="#10B981" stroke-width="2" stroke-linecap="round"/>
             </svg>
-            <h1 class="text-2xl font-bold">massCode-Web</h1>
+            <h1 class="text-2xl font-bold truncate">massCode-Web</h1>
         </div>
-        <div class="flex items-center space-x-2 ml-auto">
-            <button id="theme-toggle" class="bg-gray-200 text-gray-900 p-2 rounded hover:bg-gray-300 transition-colors dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700" title="Toggle theme">
+        <div class="flex items-center space-x-2 ml-auto flex-shrink-0">
+            <button id="theme-toggle" class="bg-gray-200 text-gray-900 p-2 rounded hover:bg-gray-300 transition-colors dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 flex-shrink-0" title="Toggle theme">
                 🌓
             </button>
-            <div class="relative">
-                <input type="text" id="search" placeholder="Enter RegEx..." class="w-64 px-3 py-2 pr-8 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 transition-colors">
-                <button id="clear-search" class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors" onclick="clearSearch()" style="display: none;">×</button>
-            </div>
+        </div>
+        <div class="relative w-full sm:w-auto mt-2 sm:mt-0 flex-shrink">
+            <input type="text" id="search" placeholder="Enter RegEx..." class="w-full sm:w-64 px-3 py-2 pr-8 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 transition-colors">
+            <button id="clear-search" class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors" onclick="clearSearch()" style="display: none;">×</button>
         </div>
     </header>
     <div class="content flex flex-1 overflow-hidden">
