🎨 Improve header layout and responsiveness in Gamemaster Explorer view

code/websites/pokedex.online/src/views/GamemasterExplorer.vue

@@ -25,8 +25,10 @@
     <div v-else class="explorer-container">
       <!-- Header -->
       <header class="explorer-header">
+        <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;