From 3acbcb1bdf5dd293ca77f7da0e815badca6480af Mon Sep 17 00:00:00 2001
From: furyhawk <furyx@hotmail.com>
Date: Mon, 1 Jun 2026 20:01:11 +0800
Subject: [PATCH] feat: enhance live map header with flexible layout and
 location button

---
 src/app.css             | 13 +++++++++++
 src/routes/+page.svelte | 52 +++++++++++++++++++++--------------------
 2 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/src/app.css b/src/app.css
index 6dba4a5..55ae4b0 100644
--- a/src/app.css
+++ b/src/app.css
@@ -101,6 +101,13 @@ h1 {
   margin-bottom: 0.65rem;
 }
 
+.map-title-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.2rem;
+}
+
 .map-actions {
   display: flex;
   gap: 0.45rem;
@@ -534,6 +541,12 @@ button:hover {
     grid-template-columns: 1fr;
   }
 
+  .map-title-row .map-actions {
+    width: auto;
+    display: flex;
+    grid-template-columns: none;
+  }
+
   .location-head {
     flex-direction: column;
     align-items: flex-start;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 0ee0f1a..fc2b774 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -448,33 +448,35 @@
   <section class="panel">
     <div class="panel-header compact">
       <div>
-        <h2>Live Map</h2>
+        <div class="map-title-row">
+          <h2>Live Map</h2>
+          <div class="map-actions">
+            <button
+              class="btn-ghost icon-btn"
+              type="button"
+              aria-label={locating ? "Resolving current location" : "Use current location"}
+              title={locating ? "Locating" : "Use Current Location"}
+              on:click={() => resolveLocationAndNearestStop()}
+              disabled={locating}
+            >
+              {#if locating}
+                <svg class="spin" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+                  <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" />
+                  <path d="M12 3a9 9 0 0 1 9 9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+                </svg>
+              {:else}
+                <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+                  <circle cx="12" cy="12" r="2" fill="currentColor" />
+                  <circle cx="12" cy="12" r="7" fill="none" stroke="currentColor" stroke-width="1.8" />
+                  <path d="M12 2v3m0 14v3M2 12h3m14 0h3" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
+                </svg>
+              {/if}
+              <span class="visually-hidden">{locating ? "Locating..." : "Use Current Location"}</span>
+            </button>
+          </div>
+        </div>
         <p class="hint">{locationMessage}</p>
       </div>
-      <div class="map-actions">
-        <button
-          class="btn-ghost icon-btn"
-          type="button"
-          aria-label={locating ? "Resolving current location" : "Use current location"}
-          title={locating ? "Locating" : "Use Current Location"}
-          on:click={() => resolveLocationAndNearestStop()}
-          disabled={locating}
-        >
-          {#if locating}
-            <svg class="spin" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
-              <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" />
-              <path d="M12 3a9 9 0 0 1 9 9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
-            </svg>
-          {:else}
-            <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
-              <circle cx="12" cy="12" r="2" fill="currentColor" />
-              <circle cx="12" cy="12" r="7" fill="none" stroke="currentColor" stroke-width="1.8" />
-              <path d="M12 2v3m0 14v3M2 12h3m14 0h3" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
-            </svg>
-          {/if}
-          <span class="visually-hidden">{locating ? "Locating..." : "Use Current Location"}</span>
-        </button>
-      </div>
     </div>
 
     <div class="map-wrap">