fix(form): address review findings

Keep the mobile layout below 480px and lock both sides of the breakpoint with browser coverage.

.github/workflows/ci.yml

@@ -7,7 +7,7 @@ permissions:
   contents: read
 
 jobs:
-  lint:
+  ci:
     uses: Sea-Haven-Industries/.github/.github/workflows/ci-python-sam.yaml@0170a57c0d99b542cfafd1f3e1d369c32643f486 # v1.0.2
     with:
       run-tests: false
@@ -16,9 +16,11 @@ jobs:
     runs-on: ubuntu-latest
     timeout-minutes: 15
     steps:
-      - uses: actions/checkout@v7
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.x
+        with:
+          persist-credentials: false
 
-      - uses: actions/setup-python@v7
+      - uses: actions/setup-python@5fda3b95a4ea91299a34e894583c3862153e4b97 # v7.x
         with:
           python-version: "3.12"
 

src/server/generate_form.py

@@ -38,8 +38,13 @@ def latest_menu() -> dict:
 
 
 def _json_for_script(value) -> str:
-    """Serialize for embedding in a <script> tag; escape </ to avoid early close."""
-    return json.dumps(value, separators=(",", ":")).replace("</", "<\\/")
+    """Serialize for embedding in a <script> tag; escape < and JS line separators."""
+    return (
+        json.dumps(value, separators=(",", ":"))
+        .replace("<", "\\u003c")
+        .replace("\u2028", "\\u2028")
+        .replace("\u2029", "\\u2029")
+    )
 
 
 def generate_form(
@@ -92,9 +97,9 @@ def generate_form(
     return template.render(
         config=form_config,
         config_json=_json_for_script(form_config),
-        css=(TEMPLATES_DIR / "form.css").read_text(),
-        form_js=(TEMPLATES_DIR / "form.js").read_text(),
-        admin_js=(TEMPLATES_DIR / "admin.js").read_text(),
+        css=(TEMPLATES_DIR / "form.css").read_text(encoding="utf-8"),
+        form_js=(TEMPLATES_DIR / "form.js").read_text(encoding="utf-8"),
+        admin_js=(TEMPLATES_DIR / "admin.js").read_text(encoding="utf-8"),
         week=week,
         scraped_at=scraped_at,
         deadline=deadline,

src/server/templates/admin.js

@@ -1,13 +1,16 @@
 /* ADMIN_JS_MARKER */
+(() => {
 const ADMIN_URL = window.ADMIN_URL;
 const ADMIN_PDF_URL = window.ADMIN_PDF_URL;
 const MEALS = window.MEALS;
 const WEEK = window.WEEK;
+const ADMIN_REQUEST_TIMEOUT_MS = 10000;
 
 let currentAdminWeek = '';
 let editingOrder = null;
 let editQuantities = {};
 let lastAdminData = null;
+let latestAdminRequest = 0;
 
 function adminHeaders() {
   const h = {};
@@ -16,8 +19,22 @@ function adminHeaders() {
   return h;
 }
 
+function adminFetch(url, options = {}) {
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), ADMIN_REQUEST_TIMEOUT_MS);
+  return fetch(url, { ...options, signal: controller.signal })
+    .finally(() => clearTimeout(timeout));
+}
+
+function setAdminActionDisabled(action, disabled) {
+  document.querySelectorAll('[data-admin-action="' + action + '"]').forEach(btn => {
+    btn.disabled = disabled;
+  });
+}
+
 function loadWeekOrders(week) {
   if (!week) return;
+  const requestId = ++latestAdminRequest;
   currentAdminWeek = week;
   editingOrder = null;
   editQuantities = {};
@@ -26,11 +43,20 @@ function loadWeekOrders(week) {
   document.getElementById('admin-empty').classList.add('is-hidden');
   document.getElementById('admin-stats').textContent = '';
 
-  fetch(ADMIN_URL + '?week=' + encodeURIComponent(week), { headers: adminHeaders() })
-    .then(r => r.json())
-    .then(data => renderAdminTable(data))
+  adminFetch(ADMIN_URL + '?week=' + encodeURIComponent(week), { headers: adminHeaders() })
+    .then(r => {
+      if (!r.ok) throw new Error('HTTP ' + r.status);
+      return r.json();
+    })
+    .then(data => {
+      if (requestId === latestAdminRequest && week === currentAdminWeek) {
+        renderAdminTable(data);
+      }
+    })
     .catch(() => {
-      tbody.innerHTML = '<tr><td colspan="5" class="admin-error">Failed to load orders.</td></tr>';
+      if (requestId === latestAdminRequest && week === currentAdminWeek) {
+        tbody.innerHTML = '<tr><td colspan="5" class="admin-error">Failed to load orders.</td></tr>';
+      }
     });
 }
 
@@ -77,8 +103,9 @@ function buildAddItemSelect(availableMeals) {
 
   availableMeals.forEach(m => {
     const opt = document.createElement('option');
+    const price = m.price || 0;
     opt.value = m.name;
-    opt.textContent = m.name + ' ($' + m.price.toFixed(2) + ')';
+    opt.textContent = m.name + ' ($' + price.toFixed(2) + ')';
     select.appendChild(opt);
   });
 
@@ -111,10 +138,10 @@ function buildEditActions(email) {
   return wrap;
 }
 
-function buildViewActions(idx, email, name) {
+function buildViewActions(email, name) {
   const wrap = document.createElement('div');
   wrap.className = 'admin-actions';
-  const editBtn = buildActionButton('Edit', 'start-edit', { index: String(idx), email });
+  const editBtn = buildActionButton('Edit', 'start-edit', { email });
   editBtn.className = 'btn btn-sm btn-edit';
   const deleteBtn = buildActionButton('Delete', 'delete', { email, name });
   deleteBtn.className = 'btn btn-sm btn-delete';
@@ -186,7 +213,7 @@ function renderAdminTable(data) {
       MEALS.forEach(m => { menuPrices[m.name] = m.price; });
       const newTotal = editNames.reduce((sum, name) => {
         const price = menuPrices[name] || 0;
-        return sum + price * (editQuantities[name] || 0);
+        return sum + window.FormUtils.employeePrice(price) * (editQuantities[name] || 0);
       }, 0);
       totalHtml = '$' + newTotal.toFixed(2);
       tr.appendChild(empTd);
@@ -225,7 +252,7 @@ function renderAdminTable(data) {
     if (isEditing) {
       actionsTd.appendChild(buildEditActions(order.employee_email));
     } else {
-      actionsTd.appendChild(buildViewActions(idx, order.employee_email, order.employee_name));
+      actionsTd.appendChild(buildViewActions(order.employee_email, order.employee_name));
     }
 
     tr.appendChild(totalTd);
@@ -240,7 +267,7 @@ function renderAdminTable(data) {
   const t1 = document.createElement('td');
   t1.textContent = 'Total';
   const t2 = document.createElement('td');
-  t2.textContent = mealCount + ' meals';
+  t2.textContent = mealCount + (mealCount === 1 ? ' meal' : ' meals');
   const t3 = document.createElement('td');
   t3.className = 'total-cell';
   t3.textContent = '$' + data.grand_total.toFixed(2);
@@ -263,7 +290,8 @@ function downloadOrderList() {
   const names = Object.keys(totals).sort((a, b) => a.localeCompare(b));
   const esc = v => {
     const s = String(v);
-    return /[",\n]/.test(s) ? '"' + s.replace(/"/g, '""') + '"' : s;
+    const safe = /^[=+\-@\t\r]/.test(s) ? "'" + s : s;
+    return /[",\n]/.test(safe) ? '"' + safe.replace(/"/g, '""') + '"' : safe;
   };
   const rows = [['Item', 'Quantity']].concat(names.map(n => [n, totals[n]]));
   const csv = rows.map(r => r.map(esc).join(',')).join('\r\n');
@@ -283,7 +311,7 @@ function downloadSummaryPdf() {
   const week = currentAdminWeek || WEEK;
   const btn = document.getElementById('admin-pdf-btn');
   if (btn) btn.disabled = true;
-  fetch(ADMIN_PDF_URL + '?week=' + encodeURIComponent(week), { headers: adminHeaders() })
+  adminFetch(ADMIN_PDF_URL + '?week=' + encodeURIComponent(week), { headers: adminHeaders() })
     .then(r => r.json().then(data => ({ ok: r.ok, status: r.status, data })))
     .then(({ ok, status, data }) => {
       if (ok && data.url) {
@@ -303,9 +331,13 @@ function downloadSummaryPdf() {
     .finally(() => { if (btn) btn.disabled = false; });
 }
 
-function adminStartEdit(idx, email) {
-  fetch(ADMIN_URL + '?week=' + encodeURIComponent(currentAdminWeek), { headers: adminHeaders() })
-    .then(r => r.json())
+function adminStartEdit(email) {
+  setAdminActionDisabled('start-edit', true);
+  adminFetch(ADMIN_URL + '?week=' + encodeURIComponent(currentAdminWeek), { headers: adminHeaders() })
+    .then(r => {
+      if (!r.ok) throw new Error('HTTP ' + r.status);
+      return r.json();
+    })
     .then(data => {
       lastAdminData = data;
       const order = data.orders.find(o => o.employee_email === email);
@@ -314,7 +346,9 @@ function adminStartEdit(idx, email) {
       editQuantities = {};
       order.items.forEach(i => { editQuantities[i.name] = i.quantity; });
       renderAdminTable(data);
-    });
+    })
+    .catch(() => alert('Failed to load this order for editing.'))
+    .finally(() => setAdminActionDisabled('start-edit', false));
 }
 
 function adminCancelEdit() {
@@ -345,26 +379,30 @@ function adminSaveEdit(email) {
     }
     return;
   }
-  fetch(ADMIN_URL, {
+  setAdminActionDisabled('save-edit', true);
+  adminFetch(ADMIN_URL, {
     method: 'PUT',
     headers: { ...adminHeaders(), 'Content-Type': 'application/json' },
     body: JSON.stringify({ week: currentAdminWeek, email, items }),
   })
     .then(r => { if (!r.ok) return r.json().then(d => { throw new Error(d.error); }); return r.json(); })
     .then(() => { editingOrder = null; editQuantities = {}; loadWeekOrders(currentAdminWeek); })
-    .catch(e => alert('Failed to update: ' + e.message));
+    .catch(e => alert('Failed to update: ' + e.message))
+    .finally(() => setAdminActionDisabled('save-edit', false));
 }
 
 function adminDeleteOrder(email, name) {
   const label = name ? name + ' (' + email + ')' : email;
   if (!confirm('Delete order for ' + label + '?')) return;
-  fetch(ADMIN_URL + '?week=' + encodeURIComponent(currentAdminWeek) + '&email=' + encodeURIComponent(email), {
+  setAdminActionDisabled('delete', true);
+  adminFetch(ADMIN_URL + '?week=' + encodeURIComponent(currentAdminWeek) + '&email=' + encodeURIComponent(email), {
     method: 'DELETE',
     headers: adminHeaders(),
   })
     .then(r => { if (!r.ok) return r.json().then(d => { throw new Error(d.error); }); return r.json(); })
     .then(() => loadWeekOrders(currentAdminWeek))
-    .catch(e => alert('Failed to delete: ' + e.message));
+    .catch(e => alert('Failed to delete: ' + e.message))
+    .finally(() => setAdminActionDisabled('delete', false));
 }
 
 function handleAdminPanelClick(e) {
@@ -372,7 +410,7 @@ function handleAdminPanelClick(e) {
   if (btn) {
     const action = btn.dataset.adminAction;
     if (action === 'start-edit') {
-      adminStartEdit(parseInt(btn.dataset.index, 10), btn.dataset.email);
+      adminStartEdit(btn.dataset.email);
     } else if (action === 'delete') {
       adminDeleteOrder(btn.dataset.email, btn.dataset.name || '');
     } else if (action === 'save-edit') {
@@ -412,3 +450,4 @@ function adminInit() {
 }
 
 adminInit();
+})();

src/server/templates/form.css

@@ -6,6 +6,7 @@
   --radius-card: 12px;
   --radius-control: 8px;
   --shadow-card: 0 1px 3px rgba(0,0,0,0.08);
+  --sticky-footer-height: 80px;
 }
 
 * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -14,7 +15,7 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   background: #f5f5f7;
   color: #1d1d1f;
-  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
+  padding-bottom: calc(var(--sticky-footer-height) + env(safe-area-inset-bottom, 0px));
 }
 
 .is-hidden { display: none !important; }
@@ -75,7 +76,7 @@ header p { font-size: 0.85rem; opacity: 0.8; }
   margin-bottom: 12px;
 }
 
-.user-info-row { display: flex; align-items: center; gap: 12px; }
+.user-bar { display: flex; align-items: center; gap: 12px; }
 
 .user-avatar {
   width: 40px;
@@ -87,9 +88,13 @@ header p { font-size: 0.85rem; opacity: 0.8; }
 
 .user-avatar:not(.is-hidden) { display: block; }
 
-.user-meta { flex: 1; }
+.user-meta { flex: 1; min-width: 0; }
 .user-name { font-weight: 600; font-size: 0.95rem; }
-.user-email { font-size: 0.85rem; color: var(--color-muted); }
+.user-email {
+  font-size: 0.85rem;
+  color: var(--color-muted);
+  overflow-wrap: anywhere;
+}
 .count-display { font-size: 0.8rem; color: var(--color-muted); margin-left: 8px; }
 .g-signin-wrap { display: flex; justify-content: center; }
 .admin-muted { font-size: 0.8rem; color: #9ca3af; }
@@ -190,6 +195,7 @@ header p { font-size: 0.85rem; opacity: 0.8; }
   background: #fff;
   border-top: 1px solid #e5e7eb;
   padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
+  min-height: calc(var(--sticky-footer-height) + env(safe-area-inset-bottom, 0px));
   box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
   z-index: 100;
 }
@@ -338,10 +344,16 @@ header p { font-size: 0.85rem; opacity: 0.8; }
   font-size: 1rem;
 }
 
+@media (max-width: 479px) {
+  .user-bar { flex-wrap: wrap; }
+  .user-meta { flex-basis: calc(100% - 52px); }
+  .user-bar #admin-btn { margin-left: 52px; }
+}
+
 @media (max-width: 480px) {
   .meal-card {
     display: grid;
-    grid-template-columns: 80px minmax(0, 1fr);
+    grid-template-columns: auto minmax(0, 1fr);
     align-items: start;
   }
   .qty-control {
@@ -469,7 +481,7 @@ header p { font-size: 0.85rem; opacity: 0.8; }
   font-size: 0.9rem;
 }
 
-.admin-toolbar .back-btn { margin: 0; padding: 8px 16px; font-size: 0.85rem; margin-top: 0; }
+.admin-toolbar .back-btn { margin: 0; padding: 8px 16px; font-size: 0.85rem; }
 
 @media (max-width: 600px) {
   .admin-toolbar { width: 100%; }

src/server/templates/form.html.j2

@@ -51,7 +51,7 @@
   {% if config.authMode == 'google' %}
   <div class="employee-info">
     <div id="user-info">
-      <div class="user-info-row">
+      <div class="user-bar">
         <img id="user-avatar" class="user-avatar is-hidden" alt="">
         <div class="user-meta">
           <div id="user-name" class="user-name"></div>
@@ -70,7 +70,7 @@
   </div>
   {% endif %}
 
-  <input type="text" class="search-bar" id="search" placeholder="Search meals...">
+  <input type="text" class="search-bar" id="search" placeholder="Search meals..." aria-label="Search meals">
 
   <div class="filters" id="filters"></div>
 

src/server/templates/form.js

@@ -26,19 +26,12 @@ let adminWeeks = [];
 let googleCredential = null;
 let googleUser = null;
 let reopenAtMs = null;
+let countdownTimer = null;
 let mealsListDelegationBound = false;
 
-window.googleCredential = null;
+const GOOGLE_AUTH_MAX_ATTEMPTS = 200;
 
-function escapeHtml(str) {
-  if (!str) return '';
-  return String(str)
-    .replace(/&/g, '&')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#39;');
-}
+window.googleCredential = null;
 
 function employeePrice(retail) {
   if (!retail) return 0;
@@ -47,7 +40,7 @@ function employeePrice(retail) {
   return empPrice;
 }
 
-window.FormUtils = { escapeHtml, employeePrice };
+window.FormUtils = { employeePrice };
 
 function syncGoogleCredential() {
   window.googleCredential = googleCredential;
@@ -61,11 +54,17 @@ function buildItems() {
   }));
 }
 
-function waitForGoogleAuth() {
+function waitForGoogleAuth(attempt = 0) {
   if (typeof google !== 'undefined' && google.accounts && google.accounts.id) {
     initGoogleAuth();
+  } else if (attempt < GOOGLE_AUTH_MAX_ATTEMPTS) {
+    setTimeout(() => waitForGoogleAuth(attempt + 1), 50);
   } else {
-    setTimeout(waitForGoogleAuth, 50);
+    const signIn = document.getElementById('g-signin-btn');
+    if (signIn) {
+      signIn.textContent = 'Google sign-in failed to load. Refresh the page to try again.';
+    }
+    console.error('Google Identity Services failed to load.');
   }
 }
 
@@ -103,7 +102,9 @@ function handleCredentialResponse(response) {
 
   updateTotal();
   checkDuplicateOrder();
-  checkAdmin();
+  checkAdmin().then(() => {
+    if (formClosed && !isAdmin) showClosedOverlay();
+  });
 }
 
 function signOut() {
@@ -257,13 +258,17 @@ function updateMealCardQty(index) {
   const qty = quantities[index] || 0;
   card.classList.toggle('selected', qty > 0);
   const qtyInput = card.querySelector('.qty');
-  if (qtyInput) qtyInput.value = qty;
+  if (qtyInput && qtyInput !== document.activeElement) qtyInput.value = qty;
 }
 
-function setQty(index, value) {
+function setQtyState(index, value) {
   const next = Math.max(0, parseInt(value, 10) || 0);
   if (next === 0) delete quantities[index];
   else quantities[index] = next;
+}
+
+function setQty(index, value) {
+  setQtyState(index, value);
   updateMealCardQty(index);
   updateTotal();
 }
@@ -286,21 +291,21 @@ function bindMealsListDelegation() {
     const delta = parseInt(btn.dataset.qtyDelta, 10);
     changeQty(index, delta);
   });
-  list.addEventListener('change', (e) => {
-    const input = e.target.closest('.qty');
-    if (!input) return;
-    const card = input.closest('[data-meal-index]');
-    if (!card) return;
-    const index = parseInt(card.dataset.mealIndex, 10);
-    setQty(index, input.value);
-  });
   list.addEventListener('input', (e) => {
     const input = e.target.closest('.qty');
     if (!input) return;
     const card = input.closest('[data-meal-index]');
     if (!card) return;
     const index = parseInt(card.dataset.mealIndex, 10);
-    setQty(index, input.value);
+    setQtyState(index, input.value);
+    updateTotal();
+  });
+  list.addEventListener('focusout', (e) => {
+    const input = e.target.closest('.qty');
+    if (!input) return;
+    const card = input.closest('[data-meal-index]');
+    if (!card) return;
+    updateMealCardQty(parseInt(card.dataset.mealIndex, 10));
   });
 }
 
@@ -372,40 +377,38 @@ async function submitOrder() {
 }
 
 async function loadRoster() {
+  let employees = ROSTER;
   try {
     const res = await fetch(ROSTER_URL);
     const data = await res.json();
-    const select = document.getElementById('emp-name');
-    select.innerHTML = '<option value="">Select your name</option>';
-    (data.employees || ROSTER).forEach(emp => {
-      const opt = document.createElement('option');
-      opt.value = emp.name;
-      opt.dataset.email = emp.email;
-      opt.textContent = emp.name;
-      select.appendChild(opt);
-    });
-    select.addEventListener('change', () => {
-      const selected = select.options[select.selectedIndex];
-      document.getElementById('emp-email').value = selected?.dataset?.email || '';
-    });
-  } catch (e) {
-    const select = document.getElementById('emp-name');
-    select.innerHTML = '<option value="">Select your name</option>';
-    ROSTER.forEach(emp => {
-      const opt = document.createElement('option');
-      opt.value = emp.name;
-      opt.dataset.email = emp.email;
-      opt.textContent = emp.name;
-      select.appendChild(opt);
-    });
-  }
+    const candidate = data.employees;
+    if (Array.isArray(candidate) && candidate.every(e => typeof e.name === 'string' && typeof e.email === 'string')) {
+      employees = candidate;
+    } else {
+      employees = ROSTER;
+    }
+  } catch (e) {}
+
+  const select = document.getElementById('emp-name');
+  select.innerHTML = '<option value="">Select your name</option>';
+  employees.forEach(emp => {
+    const opt = document.createElement('option');
+    opt.value = emp.name;
+    opt.dataset.email = emp.email;
+    opt.textContent = emp.name;
+    select.appendChild(opt);
+  });
+  select.addEventListener('change', () => {
+    const selected = select.options[select.selectedIndex];
+    document.getElementById('emp-email').value = selected?.dataset?.email || '';
+  });
 }
 
 function showClosedOverlay() {
   const overlay = document.getElementById('closed-overlay');
   overlay.classList.add('is-visible');
   overlay.style.display = 'flex';
-  document.querySelectorAll('.qty-control button').forEach(b => { b.disabled = true; });
+  document.querySelectorAll('.qty-control button, .qty-control .qty').forEach(el => { el.disabled = true; });
   const submitBtn = document.getElementById('submit-btn');
   if (submitBtn) submitBtn.disabled = true;
   if (formStatusData) startCountdown(formStatusData);
@@ -435,10 +438,10 @@ function adminBypassClosed() {
 }
 
 function checkAdmin() {
-  if (!ADMIN_URL) return;
+  if (!ADMIN_URL) return Promise.resolve();
   const headers = {};
   if (googleCredential) headers['Authorization'] = 'Bearer ' + googleCredential;
-  fetch(ADMIN_URL, { headers })
+  return fetch(ADMIN_URL, { headers })
     .then(r => r.ok ? r.json() : null)
     .then(data => {
       if (data && data.weeks) {
@@ -520,7 +523,8 @@ function getEasternOffsetMs(date) {
 function startCountdown(data) {
   if (data && data.reopen_at) reopenAtMs = data.reopen_at * 1000;
   updateCountdown();
-  setInterval(updateCountdown, 1000);
+  if (countdownTimer !== null) clearInterval(countdownTimer);
+  countdownTimer = setInterval(updateCountdown, 1000);
 }
 
 function updateCountdown() {
@@ -561,8 +565,7 @@ async function checkFormStatus() {
       formStatusData = data;
       if (isAdmin) {
         adminBypassClosed();
-      } else if (CONFIG.authMode === 'google') {
-      } else {
+      } else if (CONFIG.authMode !== 'google' || googleCredential) {
         showClosedOverlay();
       }
     }

tests/fixtures/menu.json

@@ -1,6 +1,6 @@
 {
   "scraped_at": "2026-07-27T12:00:00+00:00",
-  "meal_count": 4,
+  "meal_count": 5,
   "meals": [
     {
       "name": "Chicken Bowl",
@@ -45,6 +45,16 @@
       "dietary_tags": [],
       "image_url": "",
       "is_new": false
+    },
+    {
+      "name": "<!--<script>alert(1)</script>-->",
+      "price": 9.0,
+      "calories": "300",
+      "protein": "10g",
+      "description": "Hostile script comment",
+      "dietary_tags": [],
+      "image_url": "",
+      "is_new": false
     }
   ]
 }

tests/test_generate_form.py

@@ -2,6 +2,7 @@
 
 from __future__ import annotations
 
+import base64
 import json
 import re
 import sys
@@ -66,6 +67,42 @@ def _render(*, google: bool = False, api_key: str = "test-key") -> str:
     )
 
 
+def _google_credential() -> str:
+    payload = json.dumps(
+        {
+            "name": "Adam Moussa",
+            "email": "adam.moussa@seahavenind.com",
+            "picture": (
+                "data:image/svg+xml,"
+                "<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'/>"
+            ),
+        }
+    ).encode()
+    encoded = base64.urlsafe_b64encode(payload).decode().rstrip("=")
+    return f"e30.{encoded}.signature"
+
+
+def _mock_form_routes(page):
+    page.route(
+        "**/api/form-status/**",
+        lambda route: route.fulfill(
+            status=200,
+            content_type="application/json",
+            body='{"status":"open"}',
+        ),
+    )
+    page.route(
+        "**/api/roster**",
+        lambda route: route.fulfill(
+            status=200,
+            content_type="application/json",
+            body=json.dumps(
+                {"employees": [{"name": "Ada Lovelace", "email": "ada@example.com"}]}
+            ),
+        ),
+    )
+
+
 class TestGenerateFormStructural:
     def test_local_and_google_render(self):
         local = _render(google=False)
@@ -131,10 +168,18 @@ class TestGenerateFormStructural:
             'content="width=device-width, initial-scale=1.0, viewport-fit=cover"'
             in html
         )
-        assert "padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));" in css
+        assert "--sticky-footer-height: 80px;" in css
+        assert (
+            "padding-bottom: calc(var(--sticky-footer-height) + "
+            "env(safe-area-inset-bottom, 0px));"
+        ) in css
         assert (
             "padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));"
         ) in css
+        assert (
+            "min-height: calc(var(--sticky-footer-height) + "
+            "env(safe-area-inset-bottom, 0px));"
+        ) in css
 
     def test_script_order_form_then_admin(self):
         html = _render()
@@ -150,7 +195,6 @@ class TestGenerateFormStructural:
     def test_no_onclick_admin_data_embedding(self):
         html = _render(google=True)
         assert 'onclick="admin' not in html
-        assert 'onclick="admin' not in html
         # Static markup must not interpolate runtime data into onclick
         assert not re.search(r'onclick="[^"]*\$\{', html)
 
@@ -162,7 +206,6 @@ class TestGenerateFormStructural:
         blob = cfg_match.group(1)
         # Literal </script> inside the CONFIG script would terminate early.
         assert "</script>" not in blob
-        assert "<\\/script><script>alert(1)<\\/script>" in blob
         # Parsed JSON still contains the hostile meal name.
         cfg = json.loads(blob)
         assert any(
@@ -175,6 +218,7 @@ class TestGenerateFormStructural:
         assert "Luis' Lomo Saltado" in names
         assert 'Meal with "quotes"' in names
         assert "</script><script>alert(1)</script>" in names
+        assert "<!--<script>alert(1)</script>-->" in names
 
     def test_meal_card_template_and_qty_input(self):
         html = _render()
@@ -200,14 +244,16 @@ class TestGenerateFormStructural:
 
 
 class TestGenerateFormPlaywright:
-    @pytest.fixture(scope="class")
-    def browser(self):
-        try:
-            from playwright.sync_api import sync_playwright
-        except ImportError as exc:  # pragma: no cover
-            raise RuntimeError(
-                "playwright package is required; install requirements.txt"
-            ) from exc
+    @pytest.fixture
+    def browser_page(self, tmp_path_factory):
+        sync_api = pytest.importorskip("playwright.sync_api")
+        sync_playwright = sync_api.sync_playwright
+
+        html = _render(google=False, api_key="")
+        # Stub status/roster so the page does not hang on network; roster fallback
+        # in loadRoster still applies if fetch fails — intercept to be deterministic.
+        out = tmp_path_factory.mktemp("form") / "order-form.html"
+        out.write_text(html)
 
         with sync_playwright() as p:
             try:
@@ -217,151 +263,122 @@ class TestGenerateFormPlaywright:
                     "Chromium is required for form Playwright tests. "
                     "Run: playwright install --with-deps chromium"
                 ) from exc
-            yield browser
-            browser.close()
-
-    @pytest.fixture(scope="class")
-    def browser_page(self, browser, tmp_path_factory):
-        html = _render(google=False, api_key="")
-        # Stub status/roster so the page does not hang on network; roster fallback
-        # in loadRoster still applies if fetch fails — intercept to be deterministic.
-        out = tmp_path_factory.mktemp("form") / "order-form.html"
-        out.write_text(html)
-
-        page = browser.new_page()
-        page.route(
-            "**/api/form-status/**",
-            lambda route: route.fulfill(
-                status=200,
-                content_type="application/json",
-                body='{"status":"open"}',
-            ),
-        )
-        page.route(
-            "**/api/roster**",
-            lambda route: route.fulfill(
-                status=200,
-                content_type="application/json",
-                body=json.dumps(
-                    {
-                        "employees": [
-                            {"name": "Ada Lovelace", "email": "ada@example.com"}
-                        ]
-                    }
-                ),
-            ),
-        )
-        page.goto(out.as_uri())
-        page.wait_for_selector('[data-meal-index="0"]')
-        yield page
-        page.close()
+            try:
+                page = browser.new_page()
+                _mock_form_routes(page)
+                page.goto(out.as_uri())
+                page.wait_for_selector('[data-meal-index="0"]')
+                yield page
+            finally:
+                browser.close()
 
     @pytest.mark.parametrize("width", [320, 375, 480])
     @pytest.mark.parametrize("google", [False, True], ids=["local", "google"])
-    def test_sticky_footer_fits_narrow_viewports(
-        self, browser, tmp_path, width, google
-    ):
+    def test_sticky_footer_fits_narrow_viewports(self, tmp_path, width, google):
+        sync_api = pytest.importorskip("playwright.sync_api")
+        sync_playwright = sync_api.sync_playwright
+
         html_path = tmp_path / f"order-form-{'google' if google else 'local'}.html"
         html_path.write_text(_render(google=google, api_key=""))
 
-        page = browser.new_page(viewport={"width": width, "height": 800})
-        page.add_init_script(
-            """window.google = {
-              accounts: {
-                id: {
-                  initialize() {},
-                  renderButton() {},
-                  disableAutoSelect() {},
-                },
-              },
-            };"""
-        )
-        page.route(
-            "**/api/form-status/**",
-            lambda route: route.fulfill(
-                status=200,
-                content_type="application/json",
-                body='{"status":"open"}',
-            ),
-        )
-        page.route(
-            "**/api/roster",
-            lambda route: route.fulfill(
-                status=200,
-                content_type="application/json",
-                body='{"employees":[{"name":"Ada Lovelace","email":"ada@example.com"}]}',
-            ),
-        )
+        with sync_playwright() as p:
+            try:
+                browser = p.chromium.launch(headless=True)
+            except Exception as exc:
+                raise RuntimeError(
+                    "Chromium is required for form Playwright tests. "
+                    "Run: playwright install --with-deps chromium"
+                ) from exc
+            try:
+                page = browser.new_page(viewport={"width": width, "height": 800})
+                page.add_init_script(
+                    """window.google = {
+                      accounts: {
+                        id: {
+                          initialize() {},
+                          renderButton() {},
+                          disableAutoSelect() {},
+                        },
+                      },
+                    };"""
+                )
+                page.route(
+                    "https://accounts.google.com/gsi/client",
+                    lambda route: route.abort(),
+                )
+                _mock_form_routes(page)
+
+                page.goto(html_path.as_uri(), wait_until="domcontentloaded")
+                page.wait_for_selector('[data-meal-index="0"]', state="attached")
+                if google:
+                    page.evaluate(
+                        "(credential) => handleCredentialResponse({ credential })",
+                        _google_credential(),
+                    )
+                page.wait_for_selector('[data-meal-index="0"]', state="visible")
+
+                first_increment = page.locator(
+                    '[data-meal-index="0"] [data-qty-delta="1"]'
+                )
+                first_increment.click()
+                first_increment.click()
+                page.wait_for_function(
+                    "() => document.getElementById('count-display').textContent === "
+                    "'2 meals'"
+                )
+                page.evaluate("() => document.fonts.ready")
+
+                total = page.locator("#total-display")
+                count = page.locator("#count-display")
+                submit = page.locator("#submit-btn")
+                assert total.inner_text() == "$10.80"
+                assert count.inner_text() == "2 meals"
+                assert total.is_visible()
+                assert count.is_visible()
+                assert submit.is_visible()
+                assert submit.is_enabled()
+                submit.focus()
+                assert submit.evaluate(
+                    "(element) => element === document.activeElement"
+                )
 
-        try:
-            page.goto(html_path.as_uri())
-            page.wait_for_selector('[data-meal-index="0"]', state="attached")
-            if google:
                 page.evaluate(
+                    "() => window.scrollTo(0, document.documentElement.scrollHeight)"
+                )
+                layout = page.evaluate(
                     """() => {
-                      const payload = btoa(JSON.stringify({
-                        name: 'Ada Lovelace',
-                        email: 'ada@example.com',
-                      }));
-                      handleCredentialResponse({ credential: `e30.${payload}.sig` });
+                      const rect = (selector) => {
+                        const box = document.querySelector(selector)
+                          .getBoundingClientRect();
+                        return {
+                          left: box.left,
+                          right: box.right,
+                          top: box.top,
+                          bottom: box.bottom,
+                        };
+                      };
+                      return {
+                        clientWidth: document.documentElement.clientWidth,
+                        scrollWidth: document.documentElement.scrollWidth,
+                        footer: rect('#sticky-footer'),
+                        total: rect('#total-display'),
+                        count: rect('#count-display'),
+                        submit: rect('#submit-btn'),
+                        lastCard: rect('#meals-list .meal-card:last-child'),
+                      };
                     }"""
                 )
-            page.wait_for_selector('[data-meal-index="0"]', state="visible")
 
-            first_increment = page.locator('[data-meal-index="0"] [data-qty-delta="1"]')
-            first_increment.click()
-            first_increment.click()
-            page.wait_for_function(
-                "() => document.getElementById('count-display').textContent === "
-                "'2 meals'"
-            )
-            page.evaluate("() => document.fonts.ready")
+                assert layout["scrollWidth"] == layout["clientWidth"]
+                for selector in ("footer", "total", "count", "submit"):
+                    assert layout[selector]["left"] >= 0
+                    assert layout[selector]["right"] <= layout["clientWidth"]
+                assert layout["lastCard"]["bottom"] <= layout["footer"]["top"]
+            finally:
+                browser.close()
 
-            total = page.locator("#total-display")
-            count = page.locator("#count-display")
-            submit = page.locator("#submit-btn")
-            assert total.inner_text() == "$10.80"
-            assert count.inner_text() == "2 meals"
-            assert total.is_visible()
-            assert count.is_visible()
-            assert submit.is_visible()
-            assert submit.is_enabled()
-            submit.focus()
-            assert submit.evaluate("(element) => element === document.activeElement")
-
-            page.evaluate(
-                "() => window.scrollTo(0, document.documentElement.scrollHeight)"
-            )
-            layout = page.evaluate(
-                """() => {
-                  const rect = (selector) => {
-                    const box = document.querySelector(selector).getBoundingClientRect();
-                    return {
-                      left: box.left,
-                      right: box.right,
-                      top: box.top,
-                      bottom: box.bottom,
-                    };
-                  };
-                  return {
-                    clientWidth: document.documentElement.clientWidth,
-                    scrollWidth: document.documentElement.scrollWidth,
-                    footer: rect('#sticky-footer'),
-                    total: rect('#total-display'),
-                    count: rect('#count-display'),
-                    submit: rect('#submit-btn'),
-                    lastCard: rect('#meals-list .meal-card:last-child'),
-                  };
-                }"""
-            )
-
-            assert layout["scrollWidth"] == layout["clientWidth"]
-            for selector in ("footer", "total", "count", "submit"):
-                assert layout[selector]["left"] >= 0
-                assert layout[selector]["right"] <= layout["clientWidth"]
-            assert layout["lastCard"]["bottom"] <= layout["footer"]["top"]
-        finally:
-            page.close()
+    def test_admin_bundle_loads(self, browser_page):
+        assert browser_page.evaluate("typeof window.loadWeekOrders") == "function"
 
     def test_qty_plus_updates_total_without_list_teardown(self, browser_page):
         page = browser_page
@@ -402,27 +419,150 @@ class TestGenerateFormPlaywright:
         # Reset first card via type-in
         qty = page.locator('[data-meal-index="0"] .qty')
         qty.fill("-3")
-        qty.dispatch_event("change")
+        qty.blur()
         page.wait_for_function(
             "() => document.querySelector('[data-meal-index=\"0\"] .qty').value === '0'"
         )
         assert qty.input_value() == "0"
-        # Total may still include other meals from prior test if class-scoped page
-        # is shared — set all known cards to 0 then set one meal to 2 via type-in.
-        page.evaluate(
-            """() => {
-              document.querySelectorAll('[data-meal-index] .qty').forEach((input) => {
-                input.value = '0';
-                input.dispatchEvent(new Event('change', { bubbles: true }));
-              });
-            }"""
-        )
-        page.wait_for_function(
-            "() => document.getElementById('count-display').textContent === '0 meals'"
-        )
         qty.fill("2")
-        qty.dispatch_event("change")
+        qty.blur()
         page.wait_for_function(
             "() => document.getElementById('count-display').textContent === '2 meals'"
         )
         assert page.locator("#total-display").inner_text() == "$10.80"
+
+    @pytest.mark.parametrize("width", [320, 375])
+    def test_local_roster_has_no_horizontal_overflow(self, browser_page, width):
+        page = browser_page
+        page.set_viewport_size({"width": width, "height": 800})
+        dimensions = page.evaluate(
+            """() => ({
+              scrollWidth: document.documentElement.scrollWidth,
+              clientWidth: document.documentElement.clientWidth,
+            })"""
+        )
+        assert dimensions["scrollWidth"] == dimensions["clientWidth"]
+
+
+class TestGenerateFormGooglePlaywright:
+    @pytest.fixture(scope="class")
+    def signed_in_admin_page(self, tmp_path_factory):
+        try:
+            from playwright.sync_api import sync_playwright
+        except ImportError as exc:  # pragma: no cover
+            raise RuntimeError(
+                "playwright package is required; install requirements.txt"
+            ) from exc
+
+        out = tmp_path_factory.mktemp("google-form") / "order-form.html"
+        out.write_text(_render(google=True, api_key=""))
+
+        with sync_playwright() as p:
+            try:
+                browser = p.chromium.launch(headless=True)
+            except Exception as exc:
+                raise RuntimeError(
+                    "Chromium is required for form Playwright tests. "
+                    "Run: playwright install --with-deps chromium"
+                ) from exc
+            try:
+                page = browser.new_page()
+                page.add_init_script(
+                    """window.google = {
+                      accounts: {
+                        id: {
+                          initialize() {},
+                          renderButton() {},
+                          disableAutoSelect() {},
+                        },
+                      },
+                    };"""
+                )
+                page.route(
+                    "https://accounts.google.com/gsi/client",
+                    lambda route: route.abort(),
+                )
+
+                def handle_api(route):
+                    if "/api/form-status/" in route.request.url:
+                        route.fulfill(
+                            status=200,
+                            content_type="application/json",
+                            body='{"status":"open"}',
+                        )
+                    elif "/api/admin/orders" in route.request.url:
+                        route.fulfill(
+                            status=200,
+                            content_type="application/json",
+                            body='{"weeks":["2026-W30"]}',
+                        )
+                    else:
+                        route.fulfill(
+                            status=404,
+                            content_type="application/json",
+                            body="{}",
+                        )
+
+                page.route("https://api.example.com/**", handle_api)
+                page.goto(out.as_uri(), wait_until="domcontentloaded")
+                page.evaluate(
+                    "(credential) => handleCredentialResponse({ credential })",
+                    _google_credential(),
+                )
+                page.locator("#admin-btn").wait_for(state="visible")
+                yield page
+            finally:
+                browser.close()
+
+    @pytest.mark.parametrize("width", [320, 375])
+    def test_signed_in_admin_user_bar_fits_phone_width(
+        self, signed_in_admin_page, width
+    ):
+        page = signed_in_admin_page
+        page.set_viewport_size({"width": width, "height": 800})
+
+        for selector in (
+            "#user-avatar",
+            "#user-name",
+            "#user-email",
+            "#admin-btn",
+            "#sign-out-btn",
+        ):
+            assert page.locator(selector).is_visible()
+        assert page.locator("#admin-btn").is_enabled()
+        assert page.locator("#sign-out-btn").is_enabled()
+
+        dimensions = page.evaluate(
+            """() => ({
+              scrollWidth: document.documentElement.scrollWidth,
+              clientWidth: document.documentElement.clientWidth,
+            })"""
+        )
+        assert dimensions["scrollWidth"] == dimensions["clientWidth"]
+
+    def test_user_bar_stays_single_row_at_480(self, signed_in_admin_page):
+        page = signed_in_admin_page
+        page.set_viewport_size({"width": 480, "height": 800})
+        assert (
+            page.locator(".user-bar").evaluate(
+                "(element) => getComputedStyle(element).flexWrap"
+            )
+            == "nowrap"
+        )
+        dimensions = page.evaluate(
+            """() => ({
+              scrollWidth: document.documentElement.scrollWidth,
+              clientWidth: document.documentElement.clientWidth,
+            })"""
+        )
+        assert dimensions["scrollWidth"] == dimensions["clientWidth"]
+
+    def test_user_bar_wraps_below_shared_mobile_breakpoint(self, signed_in_admin_page):
+        page = signed_in_admin_page
+        page.set_viewport_size({"width": 479, "height": 800})
+        assert (
+            page.locator(".user-bar").evaluate(
+                "(element) => getComputedStyle(element).flexWrap"
+            )
+            == "wrap"
+        )