From d439306657bbc2edc6d6ee1a93606c1bc52eb342 Mon Sep 17 00:00:00 2001
From: Pen Anderson <pen@pentacle.games>
Date: Thu, 5 Mar 2026 09:56:54 -0600
Subject: [PATCH] Moved action buttons on mobile cards.

---
 frontend/src/pages/Departments.svelte  | 23 ++++++++++++++++-------
 frontend/src/pages/Participants.svelte |  4 +---
 frontend/src/pages/Users.svelte        |  2 +-
 frontend/src/pages/Volunteers.svelte   | 12 +++++++-----
 4 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/frontend/src/pages/Departments.svelte b/frontend/src/pages/Departments.svelte
index b7fd627..c2cf82b 100644
--- a/frontend/src/pages/Departments.svelte
+++ b/frontend/src/pages/Departments.svelte
@@ -100,7 +100,7 @@
   {#if showAdd && canCreate}
     <div class="card" style="margin-bottom:1.5rem">
       <form onsubmit={addDept}>
-        <div style="display:grid;grid-template-columns:1fr 1fr auto;gap:1rem;align-items:end">
+        <div class="form-grid" style="display:grid;grid-template-columns:1fr 1fr auto;gap:1rem;align-items:end">
           <div class="form-group" style="margin-bottom:0">
             <label for="d-name">Name *</label>
             <input id="d-name" bind:value={newName} required placeholder="e.g. Security" />
@@ -142,8 +142,8 @@
         <tbody>
           {#each $allDepts ?? [] as d (d.id)}
             {#if editID === d.id}
-              <tr>
-                <td>
+              <tr class="edit-row">
+                <td class="td-name">
                   <div style="display:flex;align-items:center;gap:0.5rem">
                     <input type="color" bind:value={editColor} style="width:36px;height:36px;padding:0.1rem;border-radius:4px;cursor:pointer;flex-shrink:0" />
                     <input bind:value={editName} required placeholder="Name" style="margin:0" />
@@ -153,7 +153,7 @@
                   <input bind:value={editDesc} placeholder="Description" style="margin:0" />
                 </td>
                 {#if canCreate}
-                  <td>
+                  <td class="td-actions">
                     <div class="actions">
                       <button class="btn btn-primary btn-sm" onclick={() => saveDept(d)} disabled={saving}>
                         {saving ? '…' : 'Save'}
@@ -165,13 +165,13 @@
               </tr>
             {:else}
               <tr>
-                <td>
+                <td class="td-name">
                   <span class="dept-dot" style="background:{d.color};margin-right:0.5rem"></span>
                   <strong>{d.name}</strong>
                 </td>
-                <td class="text-muted">{d.description || '—'}</td>
+                <td class="td-desc text-muted">{d.description || '—'}</td>
                 {#if canCreate}
-                  <td>
+                  <td class="td-actions">
                     <div class="actions">
                       <button class="btn btn-ghost btn-sm" onclick={() => startEdit(d)}>Edit</button>
                       {#if canDelete}
@@ -188,3 +188,12 @@
     </div>
   {/if}
 </div>
+
+<style>
+  @media (max-width: 640px) {
+    .td-name { width: 100%; }
+    .td-desc { width: 100%; }
+    .td-actions { width: 100%; display: flex; justify-content: flex-end; }
+    .edit-row td { width: 100%; }
+  }
+</style>
diff --git a/frontend/src/pages/Participants.svelte b/frontend/src/pages/Participants.svelte
index ef2274f..55714a6 100644
--- a/frontend/src/pages/Participants.svelte
+++ b/frontend/src/pages/Participants.svelte
@@ -506,11 +506,9 @@
 
   @media (max-width: 640px) {
     .td-name { width: 100%; }
-    .td-actions { width: 100%; }
+    .td-actions { width: 100%; display: flex; justify-content: flex-end; }
     .ticket-rows { padding: 0; border: none; border-radius: 0; margin-top: -0.5rem; }
     .ticket-rows td { width: 100%; }
-    .ticket-row { flex-direction: column; gap: 0.35rem; }
-    .ticket-row div:last-child { text-align: left; }
     .edit-row { padding: 0.75rem; }
     .edit-row td { width: 100%; }
   }
diff --git a/frontend/src/pages/Users.svelte b/frontend/src/pages/Users.svelte
index c649964..ee6b18a 100644
--- a/frontend/src/pages/Users.svelte
+++ b/frontend/src/pages/Users.svelte
@@ -278,7 +278,7 @@
 <style>
   @media (max-width: 640px) {
     .td-name { width: 100%; }
-    .td-actions { width: 100%; }
+    .td-actions { width: 100%; display: flex; justify-content: flex-end; }
     .edit-row td { width: 100%; }
   }
 </style>
diff --git a/frontend/src/pages/Volunteers.svelte b/frontend/src/pages/Volunteers.svelte
index 8e5827a..ade758b 100644
--- a/frontend/src/pages/Volunteers.svelte
+++ b/frontend/src/pages/Volunteers.svelte
@@ -228,14 +228,14 @@
                   <div class="text-muted" style="font-size:0.78rem">{v.note}</div>
                 {/if}
               </td>
-              <td class="text-muted">
+              <td class="td-dept text-muted">
                 {#if dept}
                   <span class="dept-dot" style="background:{dept.color};margin-right:0.4rem"></span>{dept.name}
                 {:else}
                   —
                 {/if}
               </td>
-              <td>
+              <td class="td-status">
                 <span class="badge {v.checked_in ? 'badge-checked' : v.email_confirmed ? 'badge-confirmed' : 'badge-unchecked'}">
                   {v.checked_in ? 'Ready' : v.email_confirmed ? 'Confirmed' : 'Unconfirmed'}
                 </span>
@@ -269,8 +269,10 @@
 
 <style>
   @media (max-width: 640px) {
-    .td-name { width: 100%; }
-    .td-ready { width: 100%; }
-    .td-actions { width: 100%; }
+    .td-name { flex: 1; min-width: 0; order: 1; }
+    .td-ready { flex-shrink: 0; align-self: flex-start; order: 2; }
+    .td-dept { width: 100%; order: 3; }
+    .td-status { width: 100%; order: 4; }
+    .td-actions { width: 100%; order: 5; display: flex; justify-content: flex-end; }
   }
 </style>