From 7eea617225b9313d7b73235ba0c78d33340313a9 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 1 Oct 2026 01:56:54 +0000
Subject: [PATCH] Panel: mobile overflow fixes

---
 panel/web/src/app.css                    | 2 ++
 panel/web/src/pages/LevelingAdmin.svelte | 1 +
 panel/web/src/pages/QuestEditor.svelte   | 1 +
 3 files changed, 4 insertions(+)

diff --git a/panel/web/src/app.css b/panel/web/src/app.css
index 29e5059..20d60c4 100644
--- a/panel/web/src/app.css
+++ b/panel/web/src/app.css
@@ -315,4 +315,6 @@ pre { white-space: pre-wrap; }
   button, .btn, button.primary, button.ghost, button.danger { white-space: normal; }
   .page > header, .page header { flex-wrap: wrap; gap: 10px; }
   .table-wrap { overflow-x: auto; }
+  main { overflow-x: clip; }
+  .page { max-width: 100%; }
 }
diff --git a/panel/web/src/pages/LevelingAdmin.svelte b/panel/web/src/pages/LevelingAdmin.svelte
index 6d999c8..b2a660f 100644
--- a/panel/web/src/pages/LevelingAdmin.svelte
+++ b/panel/web/src/pages/LevelingAdmin.svelte
@@ -334,6 +334,7 @@
   .reward-xp-needed { font-size: 0.75rem; color: #94a3b8; font-family: monospace; }
 
   .reward-actions { display: flex; align-items: center; gap: 6px; }
+  @media (max-width: 700px) { .reward-row { flex-wrap: wrap; } .reward-content { flex-basis: 60%; } }
 
   .side-col { display: flex; flex-direction: column; gap: 20px; }
   .side-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
diff --git a/panel/web/src/pages/QuestEditor.svelte b/panel/web/src/pages/QuestEditor.svelte
index 79faa2d..3d89bf9 100644
--- a/panel/web/src/pages/QuestEditor.svelte
+++ b/panel/web/src/pages/QuestEditor.svelte
@@ -399,6 +399,7 @@
   header p { color: var(--muted); margin: 0; font-size: 0.95rem; }
 
   .limit-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 9%, var(--bg-2)); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); color: var(--text); font-size: 0.9rem; }
+  @media (max-width: 700px) { .limit-banner { flex-wrap: wrap; } }
   .limit-banner:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
   .limit-banner .edit { margin-left: auto; color: var(--accent-2); white-space: nowrap; }
   .pin-tag { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; padding: 1px 7px; border-radius: 99px; font-size: 0.68rem; font-weight: 600; background: color-mix(in srgb, #fcd34d 16%, transparent); color: #fcd34d; vertical-align: middle; }