From fd4d1d13583009c16cb9bfb7451d7e1d71a6cb48 Mon Sep 17 00:00:00 2001
From: FragginWagon <greg.r.jacobs@gmail.com>
Date: Wed, 28 Jan 2026 20:17:54 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Improve=20header=20layout=20and?=
 =?UTF-8?q?=20responsiveness=20in=20Gamemaster=20Explorer=20view?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/GamemasterExplorer.vue          | 30 +++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/code/websites/pokedex.online/src/views/GamemasterExplorer.vue b/code/websites/pokedex.online/src/views/GamemasterExplorer.vue
index ef2f357..155eaa9 100644
--- a/code/websites/pokedex.online/src/views/GamemasterExplorer.vue
+++ b/code/websites/pokedex.online/src/views/GamemasterExplorer.vue
@@ -25,8 +25,10 @@
     <div v-else class="explorer-container">
       <!-- Header -->
       <header class="explorer-header">
-        <router-link to="/" class="back-button">← Back Home</router-link>
-        <h1>🔍 Gamemaster Explorer</h1>
+        <div class="header-left">
+          <router-link to="/" class="back-button">← Back Home</router-link>
+          <h1>🔍 Gamemaster Explorer</h1>
+        </div>
         <div class="header-controls">
           <button
             @click="showHelp = !showHelp"
@@ -858,11 +860,19 @@ onMounted(() => {
 .explorer-header {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 1rem;
   margin-bottom: 1rem;
   flex-wrap: wrap;
 }
 
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
 .explorer-header h1 {
   margin: 0;
   font-size: 2.5rem;
@@ -1301,10 +1311,26 @@ onMounted(() => {
 
 /* Responsive */
 @media (max-width: 768px) {
+  .explorer-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .header-left {
+    width: 100%;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
   .explorer-header h1 {
     font-size: 1.25rem;
   }
 
+  .header-controls {
+    align-self: flex-end;
+    margin-top: 0.5rem;
+  }
+
   .file-selector,
   .property-filter {
     flex-direction: column;