Use shared form controls and enforce UI patterns (Refs #110)

src/lib/ui/components/BetaTestProgress.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+    import Input from '$ui/components/primitives/Input.svelte';
+    import Select from '$ui/components/primitives/Select.svelte';
+    import Field from '$ui/components/primitives/Field.svelte';
     import { serverTitle } from '$ui/server-labels.js';
     import RelativeTime from '$ui/components/RelativeTime.svelte';
     import { timeFormat } from '$ui/stores/time-zone.js';
@@ -413,27 +416,27 @@
                 current progress uses only the current attempt.
             </p>
             <div class="filters">
-                <label
-                    >Server<select bind:value={evidenceServer}
+                <Field label="Server">
+                    <Select bind:value={evidenceServer}
                         ><option value="">All servers</option
                         >{#each [...new Set(test.evidence.map((event) => event.server))] as server}<option
                                 value={server}>{serverTitle(server)}</option
-                            >{/each}</select
-                    ></label
-                ><label
-                    >Event type<select bind:value={evidenceKind}
+                            >{/each}</Select
+                    ></Field
+                ><Field label="Event type">
+                    <Select bind:value={evidenceKind}
                         ><option value="">All events</option><option value="gameplay"
                             >Gameplay reports</option
                         ><option value="health">Health observations</option><option
                             value="manual-sign-off">Tester sign-offs</option
-                        ></select
-                    ></label
-                ><label
-                    >Search evidence<input
+                        ></Select
+                    ></Field
+                ><Field label="Search evidence">
+                    <Input
                         type="search"
                         bind:value={evidenceQuery}
                         placeholder="Round, map, tester, observation…"
-                    /></label
+                    /></Field
                 >
             </div>
             {#each filteredEvidence.slice(0, evidenceLimit) as event (event.id)}<article
@@ -683,14 +686,15 @@
     .signoff label {
         flex: 1 1 240px;
     }
+    .signoff :global(.field) {
+        flex: 1 1 240px;
+    }
     label {
         display: grid;
         gap: 6px;
         font-size: var(--text-sm);
         color: var(--text-secondary);
     }
-    input,
-    select,
     textarea {
         min-height: 40px;
         padding: 8px 10px;
@@ -714,6 +718,10 @@
         flex: 1 1 180px;
         min-width: 0;
     }
+    .filters :global(.field) {
+        flex: 1 1 180px;
+        min-width: 0;
+    }
     .evidence {
         display: grid;
         gap: 8px;