Group activities by category in the mappings selector

Long activity names overflowed the fixed-width selector box, pushing the
floated category label onto a second line where the selection border cut
through it. List each category once as a heading and its activities
below, and let the links wrap inside their own border.

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

admin/mappings.php

@@ -91,22 +91,40 @@ show_alerts();
 .item-option{padding:.35rem .8rem .35rem 1.3rem;font-size:.88rem;cursor:pointer;}
 .item-option:hover,.item-option.active{background:rgba(232,197,71,.12);color:var(--accent);}
 .item-empty{padding:.5rem .8rem;font-size:.85rem;color:var(--muted);}
+
+/* Activity selector: one heading per group, activities listed below it, so a long
+   activity name can wrap without colliding with a per-row category label. */
+.activity-picker{flex:0 0 260px;min-width:260px;}
+.activity-group{margin-bottom:1rem;}
+.activity-group:last-child{margin-bottom:0;}
+.activity-group-label{padding:0 .15rem .3rem;font-size:.7rem;font-weight:600;letter-spacing:.08em;
+                      text-transform:uppercase;color:var(--accent2);}
+.activity-link{display:block;padding:.4rem .6rem;margin-bottom:.2rem;border-radius:6px;
+               border:1px solid transparent;font-size:.85rem;line-height:1.35;text-decoration:none;
+               color:var(--muted);overflow-wrap:anywhere;
+               transition:color .15s,background .15s,border-color .15s;}
+.activity-link:hover{color:var(--text);background:rgba(255,255,255,.03);}
+.activity-link.active{background:rgba(232,197,71,.1);color:var(--accent);border-color:rgba(232,197,71,.3);}
 </style>
 
 <div style="display:flex;gap:1.5rem;flex-wrap:wrap;align-items:flex-start;">
 
   <!-- Activity selector -->
-  <div class="card" style="min-width:220px;flex:0 0 220px;">
+  <div class="card activity-picker">
     <h2>Select Activity</h2>
-    <?php foreach ($activities as $a): ?>
-    <a href="?aid=<?= $a['activityID'] ?>"
-       style="display:block;padding:.45rem .6rem;border-radius:6px;margin-bottom:.25rem;font-size:.85rem;text-decoration:none;
-              background:<?= $selectedAid==$a['activityID'] ? 'rgba(232,197,71,.1)' : 'transparent' ?>;
-              color:<?= $selectedAid==$a['activityID'] ? 'var(--accent)' : 'var(--muted)' ?>;
-              border:1px solid <?= $selectedAid==$a['activityID'] ? 'rgba(232,197,71,.3)' : 'transparent' ?>;">
-      <?= htmlspecialchars($a['activityName']) ?>
-      <span style="float:right;font-size:.72rem;color:var(--muted)"><?= htmlspecialchars($a['groupName']) ?></span>
-    </a>
+    <?php
+    // The query already orders by group, so grouping keeps the intended sort order.
+    $activityGroups = [];
+    foreach ($activities as $a) { $activityGroups[$a['groupName']][] = $a; }
+    foreach ($activityGroups as $grpName => $grpActivities):
+    ?>
+    <div class="activity-group">
+      <div class="activity-group-label"><?= htmlspecialchars($grpName) ?></div>
+      <?php foreach ($grpActivities as $a): ?>
+      <a href="?aid=<?= $a['activityID'] ?>"
+         class="activity-link<?= $selectedAid==$a['activityID'] ? ' active' : '' ?>"><?= htmlspecialchars($a['activityName']) ?></a>
+      <?php endforeach; ?>
+    </div>
     <?php endforeach; ?>
   </div>