From 800baeb8f499e0432f199d9e7b45a18871bcb8a2 Mon Sep 17 00:00:00 2001
From: FragginWagon <greg.r.jacobs@gmail.com>
Date: Wed, 28 Jan 2026 20:19:20 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Adjust=20responsive=20styles=20a?=
 =?UTF-8?q?nd=20layout=20for=20improved=20header=20and=20button=20design?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/GamemasterExplorer.vue          | 59 ++++++++++++-------
 1 file changed, 37 insertions(+), 22 deletions(-)

diff --git a/code/websites/pokedex.online/src/views/GamemasterExplorer.vue b/code/websites/pokedex.online/src/views/GamemasterExplorer.vue
index 155eaa9..4acfc48 100644
--- a/code/websites/pokedex.online/src/views/GamemasterExplorer.vue
+++ b/code/websites/pokedex.online/src/views/GamemasterExplorer.vue
@@ -859,28 +859,30 @@ onMounted(() => {
 /* Header */
 .explorer-header {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
-  gap: 1rem;
+  gap: 0.5rem;
   margin-bottom: 1rem;
-  flex-wrap: wrap;
+  padding: 0.5rem 0;
 }
 
 .header-left {
   display: flex;
-  align-items: center;
-  gap: 1rem;
-  flex-wrap: wrap;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex: 1;
+  min-width: 0;
 }
 
 .explorer-header h1 {
   margin: 0;
-  font-size: 2.5rem;
+  font-size: 1.5rem;
   color: #333;
+  word-break: break-word;
 }
 
 .back-button {
-  padding: 0.5rem 1rem;
+  padding: 0.4rem 0.8rem;
   background: #667eea;
   color: white;
   text-decoration: none;
@@ -888,6 +890,8 @@ onMounted(() => {
   font-weight: 600;
   transition: all 0.3s ease;
   display: inline-block;
+  width: fit-content;
+  font-size: 0.9rem;
 }
 
 .back-button:hover {
@@ -897,21 +901,23 @@ onMounted(() => {
 
 .header-controls {
   display: flex;
-  gap: 0.5rem;
+  gap: 0.4rem;
+  flex-shrink: 0;
 }
 
 .btn-icon {
-  width: 44px;
-  height: 44px;
+  width: 40px;
+  height: 40px;
   border-radius: 8px;
   border: 1px solid #e9ecef;
   background: #f8f9fa;
   cursor: pointer;
-  font-size: 1.25rem;
+  font-size: 1.1rem;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease;
+  flex-shrink: 0;
 }
 
 .btn-icon:hover {
@@ -1310,27 +1316,36 @@ onMounted(() => {
 }
 
 /* Responsive */
-@media (max-width: 768px) {
+@media (min-width: 769px) {
   .explorer-header {
-    flex-direction: column;
-    align-items: flex-start;
+    align-items: center;
+    gap: 1rem;
   }
 
   .header-left {
-    width: 100%;
-    flex-direction: column;
-    align-items: flex-start;
+    flex-direction: row;
+    align-items: center;
+    gap: 1rem;
   }
 
   .explorer-header h1 {
-    font-size: 1.25rem;
+    font-size: 2.5rem;
   }
 
-  .header-controls {
-    align-self: flex-end;
-    margin-top: 0.5rem;
+  .back-button {
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
   }
 
+  .btn-icon {
+    width: 44px;
+    height: 44px;
+    font-size: 1.25rem;
+  }
+}
+
+@media (max-width: 768px) {
+
   .file-selector,
   .property-filter {
     flex-direction: column;