Mobile layout, campaign name, dropdown theme fix, and z-index fixes

- Mobile: full-screen character sheet, stacked banner, compact header
- Mobile: roll log with 3 states (hidden/peek/half-screen), cycle button
- Mobile: long-press dice buttons for advantage/disadvantage popup
- Show actual campaign name instead of hardcoded "Campaign"
- Fix item/talent picker dropdowns using hardcoded dark backgrounds
- Fix z-index: dice tray (10001) > character sheet (10000) > header (9999)
- Compact app header on mobile

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

client/src/App.module.css

@@ -70,3 +70,20 @@ body {
     0 0 30px rgba(var(--gold-rgb), 0.25),
     0 2px 4px rgba(var(--shadow-rgb), 0.5);
 }
+
+@media (max-width: 768px) {
+  .header {
+    padding: 0.75rem 0;
+    margin-bottom: 1rem;
+  }
+
+  .header h1 {
+    font-size: 1.4rem;
+  }
+
+  .header::before,
+  .header::after {
+    margin-bottom: 0.5rem;
+    margin-top: 0.25rem;
+  }
+}

client/src/components/CharacterDetail.module.css

@@ -95,3 +95,19 @@
 .closeBtn:hover {
   color: var(--text-primary);
 }
+
+@media (max-width: 768px) {
+  .overlay {
+    position: fixed;
+    z-index: 10000;
+  }
+
+  .modal {
+    max-width: 100%;
+    max-height: 100%;
+    height: 100%;
+    border-radius: 0;
+    padding: 1rem;
+    border: none;
+  }
+}

client/src/components/CharacterSheet.module.css

@@ -185,6 +185,21 @@
   .panels {
     grid-template-columns: 1fr;
   }
+
+  .banner {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+
+  .vitals {
+    width: 100%;
+    justify-content: space-around;
+  }
+
+  .name {
+    font-size: 1.2rem;
+  }
 }
 
 .deleteSection {

client/src/components/DiceButton.module.css

@@ -51,3 +51,47 @@
       inset 0 0 6px rgba(var(--danger-rgb), 0.4);
   }
 }
+
+.wrapper {
+  position: relative;
+}
+
+.menu {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 0.25rem;
+  background-color: var(--bg-modal);
+  border: 1px solid rgba(var(--gold-rgb), 0.3);
+  border-radius: 4px;
+  padding: 0.2rem;
+  display: flex;
+  gap: 0.2rem;
+  z-index: 200;
+  box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.4);
+  white-space: nowrap;
+}
+
+.menuBtn {
+  padding: 0.25rem 0.5rem;
+  background: none;
+  border: 1px solid rgba(var(--gold-rgb), 0.2);
+  border-radius: 3px;
+  color: var(--text-primary);
+  font-size: 0.65rem;
+  font-family: "Cinzel", Georgia, serif;
+  cursor: pointer;
+}
+
+.menuBtn:hover {
+  background: rgba(var(--gold-rgb), 0.1);
+}
+
+.menuBtnAdv {
+  color: var(--hp);
+}
+
+.menuBtnDis {
+  color: var(--danger);
+}

client/src/components/DiceButton.tsx

@@ -1,3 +1,4 @@
+import { useState, useRef } from "react";
 import socket from "../socket";
 import styles from "./DiceButton.module.css";
 
@@ -26,16 +27,18 @@ export default function DiceButton({
   title: titleProp,
   forceCrit,
 }: DiceButtonProps) {
-  function handleClick(e: React.MouseEvent) {
-    const advantage = e.shiftKey;
-    const disadvantage = e.ctrlKey || e.metaKey;
+  const [showMenu, setShowMenu] = useState(false);
+  const longPressRef = useRef<ReturnType<typeof setTimeout>>();
+  const longPressTriggered = useRef(false);
+
+  function rollWith(advantage: boolean, disadvantage: boolean) {
+    setShowMenu(false);
 
     let actualDice = dice;
     let actualLabel = label;
     let sendAdvantage = advantage && !disadvantage;
     let sendDisadvantage = disadvantage && !advantage;
 
-    // For damage rolls (non-d20), shift or forceCrit = crit (double dice)
     const isD20 = dice.toLowerCase().includes("d20");
     if (!isD20 && (advantage || forceCrit)) {
       const match = dice.match(/^(\d*)d(\d+)(.*)/i);
@@ -60,13 +63,69 @@ export default function DiceButton({
     });
   }
 
+  function handleClick(e: React.MouseEvent) {
+    if (longPressTriggered.current) {
+      longPressTriggered.current = false;
+      return;
+    }
+    const advantage = e.shiftKey;
+    const disadvantage = e.ctrlKey || e.metaKey;
+    rollWith(advantage, disadvantage);
+  }
+
+  function handleTouchStart() {
+    longPressTriggered.current = false;
+    longPressRef.current = setTimeout(() => {
+      longPressTriggered.current = true;
+      setShowMenu(true);
+    }, 500);
+  }
+
+  function handleTouchEnd() {
+    if (longPressRef.current) clearTimeout(longPressRef.current);
+  }
+
+  function handleTouchMove() {
+    if (longPressRef.current) clearTimeout(longPressRef.current);
+  }
+
   return (
+    <div className={styles.wrapper}>
       <button
         className={`${styles.btn} ${forceCrit ? styles.crit : ""}`}
         onClick={handleClick}
-      title={titleProp || `Roll ${dice} (Shift: advantage, Ctrl: disadvantage)`}
+        onTouchStart={handleTouchStart}
+        onTouchEnd={handleTouchEnd}
+        onTouchMove={handleTouchMove}
+        title={
+          titleProp ||
+          `Roll ${dice} (Shift: advantage, Ctrl: disadvantage, long-press on mobile)`
+        }
       >
         {icon}
       </button>
+      {showMenu && (
+        <div className={styles.menu}>
+          <button
+            className={styles.menuBtn}
+            onClick={() => rollWith(false, false)}
+          >
+            Roll
+          </button>
+          <button
+            className={`${styles.menuBtn} ${styles.menuBtnAdv}`}
+            onClick={() => rollWith(true, false)}
+          >
+            ADV
+          </button>
+          <button
+            className={`${styles.menuBtn} ${styles.menuBtnDis}`}
+            onClick={() => rollWith(false, true)}
+          >
+            DIS
+          </button>
+        </div>
+      )}
+    </div>
   );
 }

client/src/components/DiceTray.module.css

@@ -1,7 +1,7 @@
 .tray {
   position: fixed;
   inset: 0;
-  z-index: 500;
+  z-index: 10001;
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.3s ease;

client/src/components/ItemPicker.module.css

@@ -25,15 +25,10 @@
   right: 0;
   max-height: 220px;
   overflow-y: auto;
-  background:
-    repeating-linear-gradient(
-      0deg,
-      transparent,
-      transparent 3px,
-      rgba(180, 155, 100, 0.02) 3px,
-      rgba(180, 155, 100, 0.02) 4px
-    ),
-    linear-gradient(175deg, #221e18 0%, #1e1b16 50%, #201c17 100%);
+  background-color: var(--bg-modal);
+  background-image: var(--texture-surface);
+  background-size: 256px 256px;
+  background-repeat: repeat;
   border: 1px solid rgba(var(--gold-rgb), 0.25);
   border-radius: 4px;
   margin-bottom: 0.25rem;

client/src/components/RollLog.module.css

@@ -38,6 +38,11 @@
   text-shadow: 0 1px 2px rgba(var(--shadow-rgb), 0.3);
 }
 
+.headerBtns {
+  display: flex;
+  gap: 0.3rem;
+}
+
 .collapseBtn {
   background: none;
   border: none;
@@ -51,6 +56,14 @@
   color: var(--gold);
 }
 
+.mobileOnly {
+  display: none;
+}
+
+.desktopOnly {
+  display: inline-flex;
+}
+
 .collapsedContent {
   display: flex;
   flex-direction: column;
@@ -134,6 +147,23 @@
     height: 200px;
     border-left: none;
     border-top: 2px solid rgba(var(--gold-rgb), 0.2);
+    transition: height 0.25s ease;
+  }
+
+  /* Peek: header + input + one roll visible */
+  .panel:not(.mobileHidden):not(.mobileOpen) {
+    height: 200px;
+  }
+
+  /* Hidden: just the header bar */
+  .panel.mobileHidden {
+    height: 36px;
+    overflow: hidden;
+  }
+
+  /* Open: half the viewport */
+  .panel.mobileOpen {
+    height: 50vh;
   }
 
   .panel.collapsed {
@@ -150,4 +180,12 @@
     writing-mode: horizontal-tb;
     max-height: none;
   }
+
+  .mobileOnly {
+    display: inline-flex;
+  }
+
+  .desktopOnly {
+    display: none;
+  }
 }

client/src/components/RollLog.tsx

@@ -10,8 +10,11 @@ interface RollLogProps {
   freshIds: Set<number>;
 }
 
+type MobileState = "hidden" | "peek" | "open";
+
 export default function RollLog({ campaignId, rolls, freshIds }: RollLogProps) {
   const [collapsed, setCollapsed] = useState(false);
+  const [mobileState, setMobileState] = useState<MobileState>("peek");
   const [input, setInput] = useState("");
 
   function handleRoll(e: React.FormEvent) {
@@ -26,6 +29,15 @@ export default function RollLog({ campaignId, rolls, freshIds }: RollLogProps) {
     setInput("");
   }
 
+  function cycleMobile() {
+    setMobileState((prev) => {
+      if (prev === "hidden") return "peek";
+      if (prev === "peek") return "open";
+      return "hidden";
+    });
+  }
+
+  // Desktop collapsed
   if (collapsed) {
     return (
       <div
@@ -42,17 +54,32 @@ export default function RollLog({ campaignId, rolls, freshIds }: RollLogProps) {
     );
   }
 
+  const mobileClass =
+    mobileState === "hidden"
+      ? styles.mobileHidden
+      : mobileState === "open"
+        ? styles.mobileOpen
+        : "";
+
   return (
-    <div className={styles.panel}>
+    <div className={`${styles.panel} ${mobileClass}`}>
       <div className={styles.header}>
         <span className={styles.title}>Roll Log</span>
+        <div className={styles.headerBtns}>
           <button
-          className={styles.collapseBtn}
+            className={`${styles.collapseBtn} ${styles.mobileOnly}`}
+            onClick={cycleMobile}
+          >
+            {mobileState === "open" ? "▾" : "▴"}
+          </button>
+          <button
+            className={`${styles.collapseBtn} ${styles.desktopOnly}`}
             onClick={() => setCollapsed(true)}
           >
             ▸
           </button>
         </div>
+      </div>
       <div className={styles.inputArea}>
         <form onSubmit={handleRoll}>
           <input
@@ -62,7 +89,9 @@ export default function RollLog({ campaignId, rolls, freshIds }: RollLogProps) {
             placeholder="Roll dice... (e.g. 2d6+1)"
           />
         </form>
-        <div className={styles.hint}>Shift: advantage · Ctrl: disadvantage</div>
+        <div className={styles.hint}>
+          Long-press dice for advantage/disadvantage
+        </div>
       </div>
       <div className={styles.entries}>
         {rolls.length === 0 && <p className={styles.empty}>No rolls yet</p>}

client/src/components/TalentPicker.module.css

@@ -25,15 +25,10 @@
   right: 0;
   max-height: 220px;
   overflow-y: auto;
-  background:
-    repeating-linear-gradient(
-      0deg,
-      transparent,
-      transparent 3px,
-      rgba(180, 155, 100, 0.02) 3px,
-      rgba(180, 155, 100, 0.02) 4px
-    ),
-    linear-gradient(175deg, #221e18 0%, #1e1b16 50%, #201c17 100%);
+  background-color: var(--bg-modal);
+  background-image: var(--texture-surface);
+  background-size: 256px 256px;
+  background-repeat: repeat;
   border: 1px solid rgba(var(--gold-rgb), 0.25);
   border-radius: 4px;
   margin-bottom: 0.25rem;

client/src/pages/CampaignView.module.css

@@ -39,6 +39,23 @@
     flex: 1;
     padding-right: 0;
   }
+
+  .header {
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .campaignName {
+    font-size: 1.1rem;
+    width: 100%;
+    text-align: center;
+    order: -1;
+  }
+
+  .addBtn {
+    font-size: 0.8rem;
+    padding: 0.4rem 0.75rem;
+  }
 }
 
 .header {

client/src/pages/CampaignView.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import { useParams, Link } from "react-router-dom";
 import socket from "../socket";
 import {
+  getCampaigns,
   getCharacters,
   createCharacter,
   updateCharacter,
@@ -35,6 +36,7 @@ export default function CampaignView() {
     ancestry: "Human",
     hp_max: 1,
   });
+  const [campaignName, setCampaignName] = useState("");
   const [rolls, setRolls] = useState<RollResult[]>([]);
   const [freshIds, setFreshIds] = useState<Set<number>>(new Set());
   const [critKeys, setCritKeys] = useState<Set<string>>(new Set());
@@ -50,6 +52,10 @@ export default function CampaignView() {
   useEffect(() => {
     getCharacters(campaignId).then(setCharacters);
     getRolls(campaignId).then(setRolls);
+    getCampaigns().then((camps) => {
+      const c = camps.find((x) => x.id === campaignId);
+      if (c) setCampaignName(c.name);
+    });
     socket.emit("join-campaign", String(campaignId));
     return () => {
       socket.emit("leave-campaign", String(campaignId));
@@ -327,7 +333,9 @@ export default function CampaignView() {
           <Link to="/" className={styles.backLink}>
             ← Campaigns
           </Link>
-          <span className={styles.campaignName}>Campaign</span>
+          <span className={styles.campaignName}>
+            {campaignName || "Campaign"}
+          </span>
           <button className={styles.addBtn} onClick={() => setShowCreate(true)}>
             + Add Character
           </button>