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

src/lib/ui/components/FleetActionsDialog.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import Select from '$ui/components/primitives/Select.svelte';
+    import Field from '$ui/components/primitives/Field.svelte';
     import { untrack } from 'svelte';
     import { currentRound, freshServer, type FleetServer } from '$lib/fleet-overview.js';
     import { actionLabels } from '$lib/provisioning.js';
@@ -130,10 +132,10 @@
     wide
 >
     <div class="fields">
-        <label class="action"
-            >Action<select bind:value={action} disabled={busy} onchange={chooseAction}>
+        <Field class="action" label="Action">
+            <Select bind:value={action} disabled={busy} onchange={chooseAction}>
                 {#each fleetActions as value}<option {value}>{actionLabels[value]}</option>{/each}
-            </select></label
+            </Select></Field
         >
         <p>{descriptions[action]}</p>
         {#if error}<p class="ui-error" role="alert">{error}</p>{/if}
@@ -236,23 +238,14 @@
 
 <style>
     .fields,
-    .action {
+    .fields :global(.action) {
         display: grid;
         gap: var(--space-4);
     }
-    .action {
+    .fields :global(.action) {
         gap: var(--space-2);
     }
-    select {
-        width: 100%;
-        min-height: 40px;
-        padding: 10px;
-        border: 1px solid var(--border-strong);
-        border-radius: var(--radius-sm);
-        background: var(--surface);
-        color: var(--text-primary);
-        font: inherit;
-    }
+
     p,
     ul {
         margin: 0;