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

src/routes/game-files/+page.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 RelativeTime from '$ui/components/RelativeTime.svelte';
     import { gameTitle } from '$ui/server-labels.js';
     import BackLink from '$ui/components/BackLink.svelte';
@@ -716,15 +718,15 @@
                 downloaded automatically.
             </p>
             <div class="download">
-                <label
-                    >Host<select bind:value={targets[item.id]}
+                <Field label="Host">
+                    <Select bind:value={targets[item.id]}
                         ><option value="">Select host</option>{#each onlineHosts as host}<option
                                 value={host.id}
                                 >{host.name} · {formatGameBytes(
                                     Number(host.inventory.storageAvailable ?? 0)
                                 )} free</option
-                            >{/each}</select
-                    ></label
+                            >{/each}</Select
+                    ></Field
                 ><Button
                     size="sm"
                     disabled={busy || !targets[item.id]}
@@ -783,8 +785,7 @@
         gap: 6px;
         font-size: var(--text-sm);
     }
-    input,
-    select {
+    input {
         width: 100%;
         min-width: 0;
         box-sizing: border-box;
@@ -794,8 +795,7 @@
         border: 1px solid var(--border-strong);
         border-radius: var(--radius-sm);
     }
-    input:disabled,
-    select:disabled {
+    input:disabled {
         opacity: 0.7;
     }
     input[type='file'] {