Revised views for mobile.

frontend/src/pages/Volunteers.svelte

@@ -132,7 +132,7 @@
   {#if showAdd && canManage}
     <div class="card" style="margin-bottom:1.5rem">
       <form onsubmit={addVolunteer}>
-        <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
+        <div class="form-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
           <div class="form-group">
             <label for="v-name">Name *</label>
             <input id="v-name" bind:value={newName} required placeholder="Full name" />
@@ -213,7 +213,7 @@
             {@const dept = deptFor(v.department_id)}
             {@const participant = participantFor(v.participant_id)}
             <tr>
-              <td>
+              <td class="td-name">
                 <strong>{v.name}</strong>
                 {#if v.is_lead}
                   <span class="badge badge-lead" style="margin-left:0.4rem">Co-Lead</span>
@@ -245,13 +245,13 @@
                   </div>
                 {/if}
               </td>
-              <td>
+              <td class="td-ready">
                 {#if !v.checked_in}
                   <CheckInButton onclick={() => checkIn(v)} />
                 {/if}
               </td>
               {#if canManage}
-                <td>
+                <td class="td-actions">
                   <button class="btn btn-ghost btn-sm" onclick={() => toggleLead(v)}
                     title={v.is_lead ? 'Remove co-lead' : 'Mark as co-lead'}>
                     {v.is_lead ? '− Co-Lead' : '+ Co-Lead'}
@@ -266,3 +266,11 @@
     </div>
   {/if}
 </div>
+
+<style>
+  @media (max-width: 640px) {
+    .td-name { width: 100%; }
+    .td-ready { width: 100%; }
+    .td-actions { width: 100%; }
+  }
+</style>