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

src/lib/ui/components/NativeHostSelection.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import Input from '$ui/components/primitives/Input.svelte';
+    import Field from '$ui/components/primitives/Field.svelte';
     import { gameTitle } from '$ui/server-labels.js';
     import RelativeTime from '$ui/components/RelativeTime.svelte';
     import type { Host, NativeDeploymentSelection } from '$lib/hosts.js';
@@ -148,36 +150,36 @@
 </script>
 
 {#snippet runtimeFields()}
-    <label
-        >{compact ? 'Runtime image' : 'Plutainer runtime image'}<input
+    <Field label={compact ? 'Runtime image' : 'Plutainer runtime image'}>
+        <Input
             required
             bind:value={selection.image}
             {disabled}
             oninput={() => onchange?.()}
-        /></label
+        /></Field
     >
     {#if compact}<p>Custom images must be prepared on a host before it can run this server.</p>{/if}
 {/snippet}
 
 {#snippet networkFields()}
-    <label
-        >Local bind address<input
+    <Field label="Local bind address">
+        <Input
             bind:value={selection.bindAddress}
             placeholder="Host default"
             {disabled}
             oninput={() => onchange?.()}
-        /></label
+        /></Field
     >
-    <label
-        >Public / NAT address<input
+    <Field label="Public / NAT address">
+        <Input
             bind:value={selection.publicAddress}
             placeholder="Host default"
             {disabled}
             oninput={() => onchange?.()}
-        /></label
+        /></Field
     >
-    <label
-        >Public / NAT port<input
+    <Field label="Public / NAT port">
+        <Input
             type="number"
             min="1"
             max="65535"
@@ -185,7 +187,7 @@
             placeholder="Same as local port"
             {disabled}
             oninput={() => onchange?.()}
-        /></label
+        /></Field
     >
     <p>Public mapping does not change the local Docker port reservation.</p>
 {/snippet}
@@ -317,21 +319,7 @@
         font-size: var(--text-sm);
         margin: 0;
     }
-    label {
-        display: grid;
-        gap: 7px;
-        font-size: var(--text-sm);
-    }
-    input {
-        width: 100%;
-        box-sizing: border-box;
-        padding: 11px;
-        color: var(--text-primary);
-        background: var(--surface);
-        border: 1px solid var(--border-control);
-        border-radius: var(--radius-sm);
-        font: inherit;
-    }
+
     p {
         color: var(--text-secondary);
         font-size: var(--text-xs);
@@ -360,7 +348,8 @@
         cursor: pointer;
         font-size: var(--text-sm);
     }
-    details label {
+
+    details :global(.field) {
         margin-top: 14px;
     }
     details p {