Refactor header layout for improved responsiveness and visual consistency

Author: MrAlders0n

index.html

@@ -34,14 +34,14 @@
     <div class="w-full max-w-xl space-y-2">
 
       <!-- App Title -->
-      <header class="flex items-center justify-between">
-        <h1 class="flex items-center gap-2 text-xl font-semibold">
-          <img class="h-8 w-8" src="content/wardrive.png" alt="MeshCore" />
-          MeshCore Wardrive
+      <header class="flex items-center justify-between gap-2">
+        <h1 class="flex items-center gap-2 text-lg sm:text-xl font-semibold truncate min-w-0">
+          <img class="h-6 w-6 sm:h-8 sm: w-8 flex-shrink-0" src="content/wardrive.png" alt="MeshCore" />
+          <span class="truncate">MeshCore Wardrive</span>
         </h1>
-        <span id="appVersion" class="text-xs text-slate-400">v1.0</span>
+        <span id="appVersion" class="text-xs text-slate-400 flex-shrink-0 whitespace-nowrap">v1.0</span>
       </header>
-
+      
       <!-- Connection Status Bar with Settings Panel -->
       <div>
         <!-- Connection Status Bar -->