Rebuild menu admin item/category rows on CSS Grid, refine actions UI

- Replace the <table>-based item and category-header rows with CSS Grid
  containers using named grid-template-areas, so desktop and mobile each
  get their own independent arrangement of the same fields instead of
  mobile being a display:block hack forced onto table markup
- Make the status badge itself the availability toggle (no separate
  "Mark Sold Out" button), fixed-width so toggling never shifts the
  Status column, and shorten its label to "Sold Out"
- Merge the item Tag into the name line as an inline badge instead of
  giving it its own column
- Group the move/edit/delete controls into two stacked button columns
  (was 4-5 buttons wide) and right-align them on mobile

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

admin/menu.js

@@ -147,7 +147,7 @@ document.getElementById('categories-container').addEventListener('click', async
 
   // Edit Item
   if (target.classList.contains('btn-edit-item')) {
-    const row = target.closest('tr');
+    const row = target.closest('.item-row');
     openItemModal(JSON.parse(row.dataset.item));
     return;
   }
@@ -165,8 +165,8 @@ document.getElementById('categories-container').addEventListener('click', async
   // Move Item Up/Down
   if (target.classList.contains('btn-move-item')) {
     const direction = target.dataset.direction;
-    const row = target.closest('tr');
-    const tbody = row.parentElement;
+    const row = target.closest('.item-row');
+    const rowsContainer = row.parentElement;
     const sibling = direction === 'up' ? row.previousElementSibling : row.nextElementSibling;
     if (!sibling) return; // already at this edge; button should be disabled anyway
 
@@ -185,14 +185,14 @@ document.getElementById('categories-container').addEventListener('click', async
         return;
       }
       if (direction === 'up') {
-        tbody.insertBefore(row, sibling);
+        rowsContainer.insertBefore(row, sibling);
       } else {
-        tbody.insertBefore(sibling, row);
+        rowsContainer.insertBefore(sibling, row);
       }
       // Re-derives disabled state from DOM position rather than re-enabling
       // `target` unconditionally, since the swap may have just moved it
       // onto an edge (e.g. into the first/last slot) where it should stay disabled.
-      refreshMoveButtonStates(tbody);
+      refreshMoveButtonStates(rowsContainer);
     } catch {
       alert('Network error. Please try again.');
       target.disabled = false;
@@ -235,10 +235,10 @@ document.getElementById('categories-container').addEventListener('click', async
     return;
   }
 
-  // Toggle Availability (Mark Sold Out / Mark Available)
+  // Toggle Availability — the status badge itself is the button now, so
+  // `target` IS the badge; no separate "Mark Sold Out" control to sync.
   if (target.classList.contains('btn-toggle-item')) {
-    const row = target.closest('tr');
-    const statusBadge = row.querySelector('.status-badge');
+    const row = target.closest('.item-row');
     target.disabled = true;
 
     const fd = new FormData();
@@ -249,9 +249,9 @@ document.getElementById('categories-container').addEventListener('click', async
     try {
       const data = await postForm(fd);
       if (data.success) {
-        statusBadge.className = `status-badge ${data.status_class}`;
-        statusBadge.textContent = data.status_badge;
-        target.textContent = data.btn_text;
+        target.className = `status-badge btn-toggle-item ${data.status_class}`;
+        target.textContent = data.status_badge;
+        target.title = `Click to mark as ${data.is_available ? 'sold out' : 'available'}`;
 
         const currentData = JSON.parse(row.dataset.item);
         currentData.is_available = data.is_available ? 1 : 0;
@@ -268,8 +268,8 @@ document.getElementById('categories-container').addEventListener('click', async
   // Delete Item
   if (target.classList.contains('btn-delete-item')) {
     if (!confirm('Are you sure you want to delete this menu item?')) return;
-    const row = target.closest('tr');
-    const tbody = row?.parentElement;
+    const row = target.closest('.item-row');
+    const rowsContainer = row?.parentElement;
 
     const fd = new FormData();
     fd.append('action', 'delete_item');
@@ -284,7 +284,7 @@ document.getElementById('categories-container').addEventListener('click', async
         row.style.transform = 'translateX(-10px)';
         setTimeout(() => {
           row.remove();
-          refreshMoveButtonStates(tbody);
+          refreshMoveButtonStates(rowsContainer);
         }, 200);
       }
     } catch {
@@ -323,10 +323,10 @@ document.getElementById('categories-container').addEventListener('click', async
 // Sets the up/down move buttons' disabled state from each row's actual DOM
 // position, rather than tracking indices by hand — first row can't move up,
 // last can't move down, everything in between can do either. Call this
-// after any insert/remove/reorder in a category's tbody.
-function refreshMoveButtonStates(tbody) {
-  if (!tbody) return;
-  const rows = [...tbody.querySelectorAll('tr[data-item-id]')];
+// after any insert/remove/reorder in a category's item-rows container.
+function refreshMoveButtonStates(rowsContainer) {
+  if (!rowsContainer) return;
+  const rows = [...rowsContainer.querySelectorAll('.item-row[data-item-id]')];
   rows.forEach((row, index) => {
     const upBtn = row.querySelector('.btn-move-item[data-direction="up"]');
     const downBtn = row.querySelector('.btn-move-item[data-direction="down"]');
@@ -347,18 +347,21 @@ function refreshCategoryMoveButtonStates() {
 }
 
 function itemRowHtml(item, isAvail) {
+  const badgeHtml = item.badge ? `<span class="menu-item-badge">${escapeHtml(item.badge)}</span>` : '';
   return `
-    <td data-label="Status"><span class="status-badge ${isAvail ? 'active' : 'inactive'}">${isAvail ? '● Available' : '○ Sold Out / Hidden'}</span></td>
-    <td data-label="Item"><strong class="item-name-cell">${escapeHtml(item.name)}</strong><div class="muted item-desc-cell">${escapeHtml(item.description || '')}</div></td>
-    <td class="font-mono item-price-cell" data-label="Price">${escapeHtml(item.price)}</td>
-    <td class="item-badge-cell" data-label="Tag">${item.badge ? `<span class="eyebrow">${escapeHtml(item.badge)}</span>` : '<span class="muted">—</span>'}</td>
-    <td data-label="Actions"><div class="admin-table-actions">
+    <div data-label="Status"><button type="button" class="status-badge btn-toggle-item ${isAvail ? 'active' : 'inactive'}" data-id="${item.id}" title="Click to mark as ${isAvail ? 'sold out' : 'available'}">${isAvail ? '● Available' : '○ Sold Out'}</button></div>
+    <div data-label="Item"><span class="item-name-row"><strong class="item-name-cell">${escapeHtml(item.name)}</strong>${badgeHtml}</span><div class="muted item-desc-cell">${escapeHtml(item.description || '')}</div></div>
+    <div class="font-mono item-price-cell" data-label="Price">${escapeHtml(item.price)}</div>
+    <div data-label="Actions"><div class="admin-table-actions">
+      <div class="action-stack">
         <button type="button" class="btn btn-outline btn-sm btn-icon btn-move-item" data-direction="up" aria-label="Move ${escapeHtml(item.name)} up">↑</button>
         <button type="button" class="btn btn-outline btn-sm btn-icon btn-move-item" data-direction="down" aria-label="Move ${escapeHtml(item.name)} down">↓</button>
+      </div>
+      <div class="action-stack">
         <button type="button" class="btn btn-outline btn-sm btn-edit-item">Edit</button>
-      <button type="button" class="btn btn-outline btn-sm btn-toggle-item" data-id="${item.id}">${isAvail ? 'Mark Sold Out' : 'Mark Available'}</button>
         <button type="button" class="btn btn-danger btn-sm btn-delete-item" data-id="${item.id}">Delete</button>
-    </div></td>
+      </div>
+    </div></div>
   `;
 }
 
@@ -367,15 +370,15 @@ function updateOrInsertItemRow(item, isNew) {
   let existingRow = document.getElementById(`item-row-${item.id}`);
 
   // An edit can reassign an item to a different category — when that
-  // happens the row needs to move tables, not just update in place, so
+  // happens the row needs to move grids, not just update in place, so
   // detach it here and let it fall through to the insert path below.
-  if (existingRow && existingRow.closest('table')?.id !== `cat-table-${item.category_id}`) {
-    const oldTbody = existingRow.parentElement;
+  if (existingRow && existingRow.closest('.item-rows')?.id !== `item-rows-${item.category_id}`) {
+    const oldRowsContainer = existingRow.parentElement;
     existingRow.remove();
     existingRow = null;
-    refreshMoveButtonStates(oldTbody);
-    if (oldTbody && !oldTbody.querySelector('tr[data-item-id]')) {
-      oldTbody.innerHTML = '<tr class="no-items-row"><td colspan="5" class="muted">No items in this category yet.</td></tr>';
+    refreshMoveButtonStates(oldRowsContainer);
+    if (oldRowsContainer && !oldRowsContainer.querySelector('.item-row[data-item-id]')) {
+      oldRowsContainer.innerHTML = '<p class="muted item-grid-empty">No items in this category yet.</p>';
     }
   }
 
@@ -383,38 +386,39 @@ function updateOrInsertItemRow(item, isNew) {
     // Update existing row
     existingRow.dataset.item = JSON.stringify(item);
     const statusBadge = existingRow.querySelector('.status-badge');
-    statusBadge.className = `status-badge ${isAvail ? 'active' : 'inactive'}`;
-    statusBadge.textContent = isAvail ? '● Available' : '○ Sold Out / Hidden';
+    statusBadge.className = `status-badge btn-toggle-item ${isAvail ? 'active' : 'inactive'}`;
+    statusBadge.textContent = isAvail ? '● Available' : '○ Sold Out';
+    statusBadge.title = `Click to mark as ${isAvail ? 'sold out' : 'available'}`;
 
     existingRow.querySelector('.item-name-cell').textContent = item.name;
     existingRow.querySelector('.item-desc-cell').textContent = item.description || '';
     existingRow.querySelector('.item-price-cell').textContent = item.price;
 
-    const badgeCell = existingRow.querySelector('.item-badge-cell');
-    badgeCell.innerHTML = item.badge
-      ? `<span class="eyebrow">${escapeHtml(item.badge)}</span>`
-      : '<span class="muted">—</span>';
+    const nameRow = existingRow.querySelector('.item-name-row');
+    nameRow.querySelector('.menu-item-badge')?.remove();
+    if (item.badge) {
+      nameRow.insertAdjacentHTML('beforeend', `<span class="menu-item-badge">${escapeHtml(item.badge)}</span>`);
+    }
 
-    existingRow.querySelector('.btn-toggle-item').textContent = isAvail ? 'Mark Sold Out' : 'Mark Available';
     return;
   }
 
   // Item was created or moved to this category — it always joins at the
   // end (see next_item_sort_order() server-side), so just append it.
-  const catTable = document.getElementById(`cat-table-${item.category_id}`);
-  if (!catTable) return;
+  const rowsContainer = document.getElementById(`item-rows-${item.category_id}`);
+  if (!rowsContainer) return;
 
-  const tbody = catTable.querySelector('tbody');
-  tbody.querySelector('.no-items-row')?.remove();
+  rowsContainer.querySelector('.item-grid-empty')?.remove();
 
-  const tr = document.createElement('tr');
-  tr.id = `item-row-${item.id}`;
-  tr.dataset.itemId = item.id;
-  tr.dataset.item = JSON.stringify(item);
-  tr.innerHTML = itemRowHtml(item, isAvail);
+  const row = document.createElement('div');
+  row.className = 'item-row';
+  row.id = `item-row-${item.id}`;
+  row.dataset.itemId = item.id;
+  row.dataset.item = JSON.stringify(item);
+  row.innerHTML = itemRowHtml(item, isAvail);
 
-  tbody.appendChild(tr);
-  refreshMoveButtonStates(tbody);
+  rowsContainer.appendChild(row);
+  refreshMoveButtonStates(rowsContainer);
 }
 
 // Static shell for a category panel. Only text-content positions use
@@ -424,37 +428,32 @@ function updateOrInsertItemRow(item, isNew) {
 function categoryPanelHtml(category) {
   return `
     <div class="panel-head">
-      <div>
       <h2 class="cat-name-heading">
         <span>${escapeHtml(category.name)}</span>
       </h2>
       <p class="muted cat-desc-text">${escapeHtml(category.description || '')}</p>
-      </div>
       <div class="admin-table-actions">
+        <div class="action-stack">
           <button type="button" class="btn btn-outline btn-sm btn-icon btn-move-cat" data-direction="up" data-id="${category.id}" aria-label="Move category up">↑</button>
           <button type="button" class="btn btn-outline btn-sm btn-icon btn-move-cat" data-direction="down" data-id="${category.id}" aria-label="Move category down">↓</button>
+        </div>
+        <div class="action-stack">
           <button type="button" class="btn btn-outline btn-sm btn-edit-cat">Edit Category</button>
           <button type="button" class="btn btn-danger btn-sm btn-delete-cat">Delete Category</button>
         </div>
       </div>
+    </div>
 
-    <div class="admin-table-wrap">
-      <table class="admin-table" id="cat-table-${category.id}">
-        <thead>
-          <tr>
-            <th>Status</th>
-            <th>Item</th>
-            <th>Price</th>
-            <th>Tag</th>
-            <th>Actions</th>
-          </tr>
-        </thead>
-        <tbody class="items-tbody">
-          <tr class="no-items-row">
-            <td colspan="5" class="muted">No items in this category yet.</td>
-          </tr>
-        </tbody>
-      </table>
+    <div class="item-grid-wrap">
+      <div class="item-grid-head" aria-hidden="true">
+        <span class="col-status">Status</span>
+        <span class="col-item">Item</span>
+        <span class="col-price">Price</span>
+        <span class="col-actions">Actions</span>
+      </div>
+      <div class="item-rows" id="item-rows-${category.id}">
+        <p class="muted item-grid-empty">No items in this category yet.</p>
+      </div>
     </div>
   `;
 }

admin/menu.php

@@ -60,9 +60,8 @@ function handle_toggle_item(array $post): array
   return [
     'success' => true,
     'is_available' => (bool) $item['is_available'],
-    'status_badge' => $item['is_available'] ? '● Available' : '○ Sold Out / Hidden',
+    'status_badge' => $item['is_available'] ? '● Available' : '○ Sold Out',
     'status_class' => $item['is_available'] ? 'active' : 'inactive',
-    'btn_text' => $item['is_available'] ? 'Mark Sold Out' : 'Mark Available',
   ];
 }
 
@@ -228,15 +227,16 @@ $menuGrouped = get_full_menu(false);
           <?php foreach ($menuGrouped as $catIndex => $category): ?>
             <div class="panel category-panel" id="cat-panel-<?= (int) $category['id'] ?>" data-cat-id="<?= (int) $category['id'] ?>" data-sort-order="<?= (int) $category['sort_order'] ?>">
               <div class="panel-head">
-                <div>
                 <h2 class="cat-name-heading">
                   <span><?= htmlspecialchars($category['name']) ?></span>
                 </h2>
                 <p class="muted cat-desc-text"><?= htmlspecialchars($category['description'] ?? '') ?></p>
-                </div>
                 <div class="admin-table-actions">
+                  <div class="action-stack">
                     <button type="button" class="btn btn-outline btn-sm btn-icon btn-move-cat" data-direction="up" data-id="<?= (int) $category['id'] ?>" aria-label="Move <?= htmlspecialchars($category['name']) ?> category up" <?= $catIndex === 0 ? 'disabled' : '' ?>>↑</button>
                     <button type="button" class="btn btn-outline btn-sm btn-icon btn-move-cat" data-direction="down" data-id="<?= (int) $category['id'] ?>" aria-label="Move <?= htmlspecialchars($category['name']) ?> category down" <?= $catIndex === $catCount - 1 ? 'disabled' : '' ?>>↓</button>
+                  </div>
+                  <div class="action-stack">
                     <button type="button" class="btn btn-outline btn-sm btn-edit-cat"
                       data-id="<?= (int) $category['id'] ?>"
                       data-name="<?= htmlspecialchars($category['name']) ?>"
@@ -248,68 +248,59 @@ $menuGrouped = get_full_menu(false);
                     </button>
                   </div>
                 </div>
+              </div>
 
-              <div class="admin-table-wrap">
-                <table class="admin-table" id="cat-table-<?= (int) $category['id'] ?>">
-                  <thead>
-                    <tr>
-                      <th>Status</th>
-                      <th>Item</th>
-                      <th>Price</th>
-                      <th>Tag</th>
-                      <th>Actions</th>
-                    </tr>
-                  </thead>
-                  <tbody class="items-tbody">
+              <div class="item-grid-wrap">
+                <div class="item-grid-head" aria-hidden="true">
+                  <span class="col-status">Status</span>
+                  <span class="col-item">Item</span>
+                  <span class="col-price">Price</span>
+                  <span class="col-actions">Actions</span>
+                </div>
+                <div class="item-rows" id="item-rows-<?= (int) $category['id'] ?>">
                   <?php if (empty($category['items'])): ?>
-                      <tr class="no-items-row">
-                        <td colspan="5" class="muted">No items in this category yet.</td>
-                      </tr>
+                    <p class="muted item-grid-empty">No items in this category yet.</p>
                   <?php else: ?>
                     <?php $itemCount = count($category['items']); ?>
                     <?php foreach ($category['items'] as $itemIndex => $item): ?>
-                        <tr id="item-row-<?= (int) $item['id'] ?>" data-item-id="<?= (int) $item['id'] ?>" data-item='<?= htmlspecialchars(json_encode($item), ENT_QUOTES, 'UTF-8') ?>'>
-                          <td data-label="Status">
-                            <?php if ($item['is_available']): ?>
-                              <span class="status-badge active">● Available</span>
-                            <?php else: ?>
-                              <span class="status-badge inactive">○ Sold Out / Hidden</span>
-                            <?php endif; ?>
-                          </td>
-                          <td data-label="Item">
+                      <div class="item-row" id="item-row-<?= (int) $item['id'] ?>" data-item-id="<?= (int) $item['id'] ?>" data-item='<?= htmlspecialchars(json_encode($item), ENT_QUOTES, 'UTF-8') ?>'>
+                        <div data-label="Status">
+                          <button type="button" class="status-badge btn-toggle-item <?= $item['is_available'] ? 'active' : 'inactive' ?>" data-id="<?= (int) $item['id'] ?>" title="Click to mark as <?= $item['is_available'] ? 'sold out' : 'available' ?>">
+                            <?= $item['is_available'] ? '● Available' : '○ Sold Out' ?>
+                          </button>
+                        </div>
+                        <div data-label="Item">
+                          <span class="item-name-row">
                             <strong class="item-name-cell"><?= htmlspecialchars($item['name']) ?></strong>
+                            <?php if (!empty($item['badge'])): ?>
+                              <span class="menu-item-badge"><?= htmlspecialchars($item['badge']) ?></span>
+                            <?php endif; ?>
+                          </span>
                           <div class="muted item-desc-cell">
                             <?= htmlspecialchars($item['description'] ?? '') ?>
                           </div>
-                          </td>
-                          <td class="font-mono item-price-cell" data-label="Price">
+                        </div>
+                        <div class="font-mono item-price-cell" data-label="Price">
                           <?= htmlspecialchars($item['price']) ?>
-                          </td>
-                          <td class="item-badge-cell" data-label="Tag">
-                            <?php if (!empty($item['badge'])): ?>
-                              <span class="eyebrow"><?= htmlspecialchars($item['badge']) ?></span>
-                            <?php else: ?>
-                              <span class="muted">—</span>
-                            <?php endif; ?>
-                          </td>
-                          <td data-label="Actions">
+                        </div>
+                        <div data-label="Actions">
                           <div class="admin-table-actions">
+                            <div class="action-stack">
                               <button type="button" class="btn btn-outline btn-sm btn-icon btn-move-item" data-direction="up" aria-label="Move <?= htmlspecialchars($item['name']) ?> up" <?= $itemIndex === 0 ? 'disabled' : '' ?>>↑</button>
                               <button type="button" class="btn btn-outline btn-sm btn-icon btn-move-item" data-direction="down" aria-label="Move <?= htmlspecialchars($item['name']) ?> down" <?= $itemIndex === $itemCount - 1 ? 'disabled' : '' ?>>↓</button>
+                            </div>
+                            <div class="action-stack">
                               <button type="button" class="btn btn-outline btn-sm btn-edit-item">Edit</button>
-                              <button type="button" class="btn btn-outline btn-sm btn-toggle-item" data-id="<?= (int) $item['id'] ?>">
-                                <?= $item['is_available'] ? 'Mark Sold Out' : 'Mark Available' ?>
-                              </button>
                               <button type="button" class="btn btn-danger btn-sm btn-delete-item" data-id="<?= (int) $item['id'] ?>">
                                 Delete
                               </button>
                             </div>
-                          </td>
-                        </tr>
+                          </div>
+                        </div>
+                      </div>
                     <?php endforeach; ?>
                   <?php endif; ?>
-                  </tbody>
-                </table>
+                </div>
               </div>
             </div>
           <?php endforeach; ?>

styles.css

@@ -1320,6 +1320,32 @@
     color: var(--ink-muted);
   }
 
+  /* The menu admin's status badge doubles as its own availability toggle
+     (see .btn-toggle-item) — a plain <button> would otherwise pick up the
+     browser's default chrome underneath the badge's own background/border.
+     Scoped to the element type so the read-only status badges elsewhere
+     (e.g. the announcements table) aren't affected. */
+  /* Fixed to fit its longest possible label ("● Available", ~6.7rem
+     measured) so toggling doesn't change the badge's — and therefore the
+     Status column's — width and shove every other column sideways. */
+  button.status-badge {
+    appearance: none;
+    -webkit-appearance: none;
+    cursor: pointer;
+    justify-content: center;
+    width: 7rem;
+    transition: opacity .15s ease;
+  }
+
+  button.status-badge:hover {
+    opacity: 0.8;
+  }
+
+  button.status-badge:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
   /* admin table & list actions */
   .admin-table-wrap {
     overflow-x: auto;
@@ -1365,6 +1391,15 @@
     white-space: nowrap;
   }
 
+  /* Groups the item row's move (↑/↓) and edit/delete controls into two
+     narrow vertical stacks instead of four buttons side by side — keeps
+     the Actions column (and the table as a whole) from running wide. */
+  .action-stack {
+    display: inline-flex;
+    flex-direction: column;
+    gap: 0.35rem;
+  }
+
   /* Below ~760px a plain <table> forces long text (item descriptions,
      headlines) into a column so narrow it wraps one word per line. Recast
      each row as a labeled card instead — the label comes from the td's
@@ -1419,6 +1454,19 @@
       flex-wrap: wrap;
       white-space: normal;
     }
+
+    /* Right-align the action buttons instead of leaving them stranded at
+       the card's left edge — item rows (an inline-flex box in a
+       full-width block <td>, so text-align positions it) and category
+       headers (a flex item in .panel-head, so margin-left:auto pushes it
+       to the end of its line) need different techniques to get there. */
+    .admin-table td[data-label="Actions"] {
+      text-align: right;
+    }
+
+    .panel-head .admin-table-actions {
+      margin-left: auto;
+    }
   }
 
   .btn-sm {
@@ -1575,10 +1623,15 @@
     font-weight: normal;
   }
 
-  /* admin menu table: category panel header + item cell formatting.
+  /* admin menu grid: category panel header + item row formatting.
      Shared between admin/menu.php's server render and admin/menu.js's
      client-side row/panel templates, so it lives here once instead of
-     being duplicated as inline styles in both places. */
+     being duplicated as inline styles in both places.
+
+     This — not <table>/<tr>/<td> — is the item list's actual layout.
+     Desktop and mobile each get their own grid-template-areas map (see the
+     mobile override below), so the two can be redesigned independently
+     instead of one being a display:block hack forced onto the other. */
   .font-mono {
     font-family: var(--font-mono);
   }
@@ -1586,17 +1639,96 @@
   /* two classes to reliably outrank .panel h2's margin-bottom above */
   .category-panel .cat-name-heading {
     margin-bottom: 0.25rem;
+    grid-area: name;
   }
 
   .cat-desc-text {
     font-size: 0.88rem;
   }
 
-  .no-items-row td {
+  .category-panel .cat-desc-text {
+    grid-area: desc;
+  }
+
+  /* Category panel-head as a grid: title on its own top row, description
+     and the move/edit/delete buttons sharing the row below with the
+     buttons pinned to the far end (matches the desktop arrangement this
+     replaced — see the mobile override for how that changes below 760px). */
+  .category-panel .panel-head {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-areas:
+      "name    actions"
+      "desc    actions";
+    align-items: center;
+    column-gap: 0.75rem;
+  }
+
+  .category-panel .panel-head .admin-table-actions {
+    grid-area: actions;
+  }
+
+  /* Each category's item list: a header row of column labels (desktop
+     only — hidden on mobile below) plus one grid per item row, all
+     sharing the same column template so they line up. */
+  .item-grid-wrap {
+    margin-top: 1rem;
+  }
+
+  .item-grid-head,
+  .item-row {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto auto;
+    grid-template-areas: "status item price actions";
+    column-gap: 0.75rem;
+    align-items: center;
+  }
+
+  .item-grid-head {
+    padding: 0 0.75rem 0.85rem;
+    border-bottom: 1px solid var(--rule);
+    font-family: var(--font-mono);
+    font-size: 0.72rem;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--gold);
+    font-weight: 500;
+  }
+
+  .item-row {
+    padding: 0.85rem 0.75rem;
+    border-bottom: 1px solid var(--rule);
+  }
+
+  .item-rows .item-row:last-child {
+    border-bottom: none;
+  }
+
+  .col-status { grid-area: status; }
+  .col-item { grid-area: item; }
+  .col-price { grid-area: price; }
+  .col-actions { grid-area: actions; }
+
+  .item-row [data-label="Status"] { grid-area: status; }
+  .item-row [data-label="Item"] { grid-area: item; }
+  .item-row [data-label="Price"] { grid-area: price; }
+  .item-row [data-label="Actions"] { grid-area: actions; }
+
+  .item-grid-empty {
     text-align: center;
     padding: 1.5rem 0;
   }
 
+  /* Wraps the item name and its optional badge (reusing the public menu's
+     .menu-item-badge pill) so they sit on one inline-flowing line instead
+     of giving the badge its own column. */
+  .item-name-row {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+
   .item-desc-cell {
     font-size: 0.82rem;
     margin-top: 0.2rem;
@@ -1612,8 +1744,59 @@
     font-size: 0.8rem;
   }
 
-  .item-badge-cell .eyebrow {
+  /* Menu admin grid: its own mobile arrangement, independent of the
+     desktop one above — this is the whole point of grid-template-areas
+     over the <table> hack. Same fields, different map. Placed after the
+     desktop rules above (rather than in the earlier shared .admin-table
+     mobile block) so it wins the cascade at equal specificity — a rule's
+     source position still matters once a media query lets both compete. */
+  @media (max-width: 47.5em) {
+    .item-grid-head {
+      display: none;
+    }
+
+    .item-row {
+      grid-template-columns: 1fr;
+      grid-template-areas:
+        "status"
+        "item"
+        "price"
+        "actions";
+      row-gap: 0.4rem;
+      border: 1px solid var(--rule);
+      border-radius: 0.25rem;
+      padding: 0.9rem 1rem;
+      margin-bottom: 0.85rem;
+    }
+
+    .item-rows .item-row:last-child {
+      border-bottom: none;
+      margin-bottom: 0;
+    }
+
+    .item-row [data-label]::before {
+      content: attr(data-label);
+      display: block;
+      font-family: var(--font-mono);
       font-size: 0.68rem;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      color: var(--gold);
+      margin-bottom: 0.3rem;
+    }
+
+    .item-row [data-label="Actions"] {
+      justify-self: end;
+    }
+
+    .category-panel .panel-head {
+      grid-template-columns: 1fr;
+      grid-template-areas:
+        "name"
+        "desc"
+        "actions";
+      row-gap: 0.5rem;
+    }
   }
 
   /* ---------- admin modal dialogs ---------- */