Fix mobile notification and quest tab overlap

Author: web3blind

app/css/main.css

@@ -307,7 +307,7 @@ body {
 
 /* Toast */
 #toast-container {
-    position: fixed;
+    position: sticky;
     top: 0;
     left: 0;
     right: 0;
@@ -353,11 +353,14 @@ body {
 
 /* Connection status */
 #connection-status {
-    position: fixed;
-    top: 8px;
-    left: 50%;
-    transform: translate(-50%, -120%);
+    position: sticky;
+    top: 0;
+    left: auto;
+    right: auto;
+    transform: none;
+    display: none;
     text-align: center;
+    margin: 6px auto 0;
     padding: 6px 12px;
     background: rgba(13, 17, 23, 0.88);
     color: var(--color-text-muted);
@@ -366,16 +369,18 @@ body {
     border: 1px solid rgba(255,255,255,0.08);
     border-radius: 999px;
     z-index: 300;
-    transition: transform 0.25s ease, opacity 0.25s ease;
+    transition: opacity 0.25s ease;
     opacity: 0;
     pointer-events: none;
-    white-space: nowrap;
+    white-space: normal;
+    width: max-content;
     max-width: calc(100vw - 24px);
     overflow: hidden;
     text-overflow: ellipsis;
 }
 #connection-status.show {
-    transform: translate(-50%, 0);
+    display: block;
+    transform: none;
     opacity: 1;
 }
 
@@ -1030,8 +1035,21 @@ body {
 /* Quest Screen */
 .quests-screen { max-width: 480px; margin: 0 auto; }
 .quests-screen h1 { margin-bottom: 16px; }
-.quest-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
-.quest-tabs .btn { flex: 1; min-width: 70px; }
+.quest-tabs {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
+    margin-bottom: 16px;
+}
+.quest-tabs .btn {
+    width: 100%;
+    min-width: 0;
+    min-height: var(--touch-target);
+    padding: 8px 6px;
+    white-space: normal;
+    line-height: 1.15;
+    overflow-wrap: anywhere;
+}
 .quest-tabs .btn.active { background: var(--color-primary); color: #000; }
 
 .quest-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }

app/index.html

@@ -11,7 +11,7 @@
     <link rel="manifest" href="manifest.json">
     <link rel="icon" type="image/png" sizes="192x192" href="assets/icons/icon-192.png">
     <link rel="apple-touch-icon" href="assets/icons/icon-192.png">
-    <link rel="stylesheet" href="css/main.css?v=20260711a">
+    <link rel="stylesheet" href="css/main.css?v=20260711b">
     <link rel="stylesheet" href="css/themes.css">
     <link rel="stylesheet" href="css/accessibility.css">
 </head>
@@ -171,7 +171,7 @@
     <!-- UI Components -->
     <script src="js/ui/sound.js"></script>
     <script src="js/ui/components/progress-bar.js"></script>
-    <script src="js/ui/components/toast.js?v=20260711a"></script>
+    <script src="js/ui/components/toast.js?v=20260711b"></script>
     <script src="js/ui/components/modal.js"></script>
     <script src="js/ui/components/nav.js"></script>
     <script src="js/ui/components/battle-narrator.js"></script>

app/js/ui/components/toast.js

@@ -13,7 +13,12 @@ var Toast = (function() {
             container.id = 'toast-container';
             container.setAttribute('aria-live', 'polite');
             container.setAttribute('role', 'status');
-            document.body.appendChild(container);
+            var appMain = document.getElementById('app-main');
+            if (appMain && appMain.parentNode) {
+                appMain.parentNode.insertBefore(container, appMain);
+            } else {
+                document.body.appendChild(container);
+            }
         }
         return container;
     }

app/sw.js

@@ -1,5 +1,5 @@
 // Viz Magic — Service Worker
-var CACHE_NAME = 'viz-magic-v29';
+var CACHE_NAME = 'viz-magic-v30';
 var ASSETS = [
     '/',
     '/index.html',

tests/core-screen-accessibility-smoke.test.js

@@ -90,7 +90,7 @@ async function run() {
     var badLogs = logs.filter(function(l) { return l.type === 'error' || l.type === 'pageerror'; });
     assert.deepStrictEqual(failed, [], 'all core screens should render with named controls and no raw keys');
     assert.deepStrictEqual(badLogs, [], 'core screen smoke should not emit console errors/page errors');
-    assert.ok(result.cachesKeys.indexOf('viz-magic-v29') !== -1, 'service worker cache should use latest cache name');
+    assert.ok(result.cachesKeys.indexOf('viz-magic-v30') !== -1, 'service worker cache should use latest cache name');
     assert.ok(result.scripts.some(function(src) { return src.indexOf('helpers.js?v=20260621l') !== -1; }), 'helpers script should be cache-busted');
     assert.ok(result.scripts.some(function(src) { return src.indexOf('territory.js?v=20260621l') !== -1; }), 'territory script should be cache-busted');
     assert.ok(result.scripts.some(function(src) { return src.indexOf('state-engine.js?v=20260621m') !== -1; }), 'state engine script should be cache-busted');

tests/player-bug-regressions.test.js

@@ -335,7 +335,7 @@ test('high-traffic UI narration, screen announcements, and inventory stat labels
 
 test('service worker updates quickly and keeps navigations network-first', function () {
   const swJs = read('app/sw.js');
-  assert.ok(/viz-magic-v29/.test(swJs), 'service worker cache version should be bumped');
+  assert.ok(/viz-magic-v30/.test(swJs), 'service worker cache version should be bumped');
   assert.ok(/self\.skipWaiting\(\)/.test(swJs), 'service worker should activate new cache without waiting for all tabs to close');
   assert.ok(/self\.clients\.claim\(\)/.test(swJs), 'service worker should claim clients after activation');
   assert.ok(/event\.request\.mode === 'navigate'[\s\S]*fetch\(event\.request\)/.test(swJs), 'navigation requests should prefer network to avoid stale cached index');
@@ -374,9 +374,11 @@ test('mobile entry helpers cover keyboard paste, home-screen shortcut, nav parit
   assert.ok(/var PRIMARY_HOME_SCREENS = \['home', 'hunt', 'map', 'guild', 'marketplace', 'crafting', 'character', 'help', 'leaderboard'\]/.test(homeJs), 'home primary grid should mirror bottom nav screens');
   assert.ok(/nav_bazaar/.test(homeJs) && /nav_crafting/.test(homeJs), 'home primary labels should reuse bottom-nav translation keys');
   assert.ok(/actionType === 'chronicle_post'[\s\S]*_normalizeDedupeText/.test(chronicleJs), 'chronicle post dedupe should ignore temporary block numbers');
-  assert.ok(/top:\s*0/.test(mainCss) && /toast-strip/.test(mainCss), 'toast CSS should render as a compact top strip');
+  assert.ok(/insertBefore\(container, appMain\)/.test(toastJs), 'toast strip should be inserted before app-main so it does not cover headings');
+  assert.ok(/#connection-status[\s\S]*position:\s*sticky/.test(mainCss), 'connection status should stay in normal flow instead of covering headings');
+  assert.ok(/\.quest-tabs[\s\S]*grid-template-columns:\s*repeat\(2, minmax\(0, 1fr\)\)/.test(mainCss), 'quest tabs should render as a two-column mobile grid');
   assert.ok(/role', type === 'error' \? 'alert' : 'status'/.test(toastJs), 'only errors should be assertive toast alerts');
-  assert.ok(/viz-magic-v29/.test(read('app/sw.js')), 'service worker cache should be bumped for UI changes');
+  assert.ok(/viz-magic-v30/.test(read('app/sw.js')), 'service worker cache should be bumped for UI changes');
 });
 
 if (process.exitCode) {