Fix mobile layout, roll log visibility with character sheet, ngrok host allowlist, misc UI polish

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-width: 900px;
-  max-height: 95vh;
+  max-height: 90vh;
   overflow-y: auto;
   overflow-x: hidden;
   padding: 1.5rem;

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;
+  }
+}

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 {

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": {