Update header layout and app version display for improved aesthetics

MrAlders0n · MrAlders0n · commit c74bfe4fe441 · 2026-01-08T22:28:21.000-05:00
diff --git a/content/tailwind.css b/content/tailwind.css
@@ -617,6 +617,10 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .text-\[10px\] {
+    font-size: 10px;
+    line-height: 1;
+  }
   .leading-5 {
     --tw-leading: calc(var(--spacing) * 5);
     line-height: calc(var(--spacing) * 5);
diff --git a/index.html b/index.html
@@ -31,16 +31,16 @@
 </head>
 
 <body class="bg-slate-900 text-slate-100">
-  <main class="min-h-screen flex items-start justify-center px-4 pt-2 pb-4">
-    <div class="w-full max-w-xl space-y-2">
+  <main class="min-h-screen flex items-start justify-center px-3 pt-1 pb-3">
+    <div class="w-full max-w-xl space-y-1.5">
 
       <!-- App Title -->
-      <header class="flex items-center justify-between gap-3">
-        <h1 class="flex items-center gap-3 text-lg sm:text-xl font-bold truncate min-w-0">
-          <img class="h-12 w-12 sm:h-14 sm:w-14 flex-shrink-0" src="content/wardrive.png" alt="MeshCore" />
+      <header class="flex items-center justify-between gap-2 py-0.5">
+        <h1 class="flex items-center gap-2 text-base font-bold truncate min-w-0">
+          <img class="h-7 w-7 flex-shrink-0" src="content/wardrive.png" alt="MeshCore" />
           <span class="truncate">MeshMapper</span>
         </h1>
-        <span id="appVersion" class="text-xs bg-slate-800 border border-slate-700 px-3 py-1 rounded-full text-slate-400 flex-shrink-0">v1.0</span>
+        <span id="appVersion" class="text-[10px] bg-slate-800 border border-slate-700 px-2 py-0.5 rounded-full text-slate-400 flex-shrink-0">v1.0</span>
       </header>
 
       <!-- Connection Status Bar with Settings Panel -->
