From 9b1a0df8a5e1b8c2a3cc5dedb5a84e6121f66bee Mon Sep 17 00:00:00 2001
From: Aaron Wood <aaron.wood@mac.lan>
Date: Thu, 9 Apr 2026 01:49:23 -0400
Subject: [PATCH] Fix mobile layout, roll log visibility with character sheet,
 ngrok host allowlist, misc UI polish

---
 .../src/components/CharacterDetail.module.css |  6 ++---
 client/src/components/RollLog.module.css      | 26 +++++++++++++++++++
 client/src/pages/CampaignView.module.css      | 13 ++++++++++
 client/vite.config.ts                         |  1 +
 4 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/client/src/components/CharacterDetail.module.css b/client/src/components/CharacterDetail.module.css
index 57482ee..92ddd33 100644
--- a/client/src/components/CharacterDetail.module.css
+++ b/client/src/components/CharacterDetail.module.css
@@ -1,5 +1,5 @@
 .overlay {
-  position: fixed;
+  position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.7);
   display: flex;
@@ -14,8 +14,8 @@
   border: 1px solid #333;
   border-radius: 12px;
   width: 100%;
-  max-width: 1100px;
-  max-height: 95vh;
+  max-width: 900px;
+  max-height: 90vh;
   overflow-y: auto;
   overflow-x: hidden;
   padding: 1.5rem;
diff --git a/client/src/components/RollLog.module.css b/client/src/components/RollLog.module.css
index bd085ec..83389ca 100644
--- a/client/src/components/RollLog.module.css
+++ b/client/src/components/RollLog.module.css
@@ -7,6 +7,8 @@
   flex-direction: column;
   transition: width 0.2s;
   flex-shrink: 0;
+  z-index: 150;
+  position: relative;
 }
 
 .panel.collapsed {
@@ -118,3 +120,27 @@
   font-style: italic;
   padding: 2rem 0;
 }
+
+@media (max-width: 768px) {
+  .panel {
+    width: 100%;
+    height: 200px;
+    border-left: none;
+    border-top: 1px solid #333;
+  }
+
+  .panel.collapsed {
+    width: 100%;
+    height: 36px;
+  }
+
+  .collapsedContent {
+    flex-direction: row;
+    padding: 0.4rem 0.75rem;
+  }
+
+  .collapsedLast {
+    writing-mode: horizontal-tb;
+    max-height: none;
+  }
+}
diff --git a/client/src/pages/CampaignView.module.css b/client/src/pages/CampaignView.module.css
index 48ad6ee..5c98d63 100644
--- a/client/src/pages/CampaignView.module.css
+++ b/client/src/pages/CampaignView.module.css
@@ -7,6 +7,19 @@
   flex: 1;
   overflow-y: auto;
   padding-right: 0.5rem;
+  position: relative;
+  min-width: 0;
+}
+
+@media (max-width: 768px) {
+  .layout {
+    flex-direction: column;
+  }
+
+  .main {
+    flex: 1;
+    padding-right: 0;
+  }
 }
 
 .header {
diff --git a/client/vite.config.ts b/client/vite.config.ts
index e755720..b804ec0 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -5,6 +5,7 @@ export default defineConfig({
   plugins: [react()],
   server: {
     port: 5173,
+    allowedHosts: true,
     proxy: {
       "/api": "http://localhost:3000",
       "/socket.io": {