Fix form alignment on interface edit and peer detail pages

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>

app/templates/interfaces.html

@@ -88,21 +88,23 @@
         <input name="persistent_keepalive" type="number" min="0" max="3600" value="{{ iface.persistent_keepalive }}"
                class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">
       </label>
-      <label class="flex items-end gap-2 pb-2 text-sm font-medium text-slate-600">
+      <label class="block text-sm font-medium text-slate-600">Peer isolation
-        <input name="peer_isolation" type="checkbox" value="true" {% if iface.peer_isolation %}checked{% endif %}
+        <span class="mt-1 flex items-center gap-2 py-2">
-               class="h-4 w-4 rounded border-slate-300">
+          <input name="peer_isolation" type="checkbox" value="true" {% if iface.peer_isolation %}checked{% endif %}
-        Peer isolation
+                 class="h-4 w-4 rounded border-slate-300">
+          <span class="text-xs font-normal text-slate-400">Block peer-to-peer traffic</span>
+        </span>
       </label>
       <label class="block text-sm font-medium text-slate-600">MTU
         <input name="mtu" type="number" min="0" max="1500" value="{{ iface.mtu or '' }}" placeholder="1420 (default)"
                class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">
         <span class="mt-1 block text-xs text-slate-400">Lower for PPPoE (1412) or nested tunnels (1340). 0 = wg default.</span>
       </label>
-      <label class="flex items-end gap-2 pb-2 text-sm font-medium text-slate-600">
+      <label class="block text-sm font-medium text-slate-600">MSS clamping
-        <input name="mss_clamp" type="checkbox" value="true" {% if iface.mss_clamp %}checked{% endif %}
+        <span class="mt-1 flex items-center gap-2 py-2">
-               class="h-4 w-4 rounded border-slate-300">
+          <input name="mss_clamp" type="checkbox" value="true" {% if iface.mss_clamp %}checked{% endif %}
-        <span>MSS clamping
+                 class="h-4 w-4 rounded border-slate-300">
-          <span class="block text-xs font-normal text-slate-400">Fixes "ping works but pages hang"</span>
+          <span class="text-xs font-normal text-slate-400">Fixes "ping works but pages hang"</span>
         </span>
       </label>
       <label class="block text-sm font-medium text-slate-600">FwMark
@@ -118,11 +120,12 @@
       <label class="block text-sm font-medium text-slate-600 sm:col-span-2 lg:col-span-1">PostUp commands
         <textarea name="post_up" rows="2" placeholder="one command per line"
                   class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 font-mono text-xs focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">{{ iface.post_up }}</textarea>
+        <span class="mt-1 block text-xs text-slate-400">Run as root by wg-quick on interface up.</span>
       </label>
       <label class="block text-sm font-medium text-slate-600 sm:col-span-2 lg:col-span-1">PostDown commands
         <textarea name="post_down" rows="2" placeholder="one command per line"
                   class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 font-mono text-xs focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">{{ iface.post_down }}</textarea>
-        <span class="mt-1 block text-xs text-slate-400">Run as root by wg-quick on interface up/down.</span>
+        <span class="mt-1 block text-xs text-slate-400">Run as root by wg-quick on interface down.</span>
       </label>
       <div class="col-span-full">
         <button type="submit"
@@ -173,9 +176,11 @@
       <input name="persistent_keepalive" type="number" min="0" max="3600" value="25"
              class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">
     </label>
-    <label class="flex items-end gap-2 pb-2 text-sm font-medium text-slate-600">
+    <label class="block text-sm font-medium text-slate-600">Peer isolation
-      <input name="peer_isolation" type="checkbox" value="true" class="h-4 w-4 rounded border-slate-300">
+      <span class="mt-1 flex items-center gap-2 py-2">
-      Peer isolation
+        <input name="peer_isolation" type="checkbox" value="true" class="h-4 w-4 rounded border-slate-300">
+        <span class="text-xs font-normal text-slate-400">Block peer-to-peer traffic</span>
+      </span>
     </label>
     <div class="col-span-full">
       <button type="submit"

app/templates/peer_detail.html

@@ -5,7 +5,7 @@
 {% if error %}
 <p class="mb-4 rounded-md bg-red-50 px-3 py-2 text-sm text-red-700">{{ error }}</p>
 {% endif %}
-<div class="mb-6 flex items-center justify-between">
+<div class="mb-6 flex flex-wrap items-center justify-between gap-3">
   <h1 class="flex items-center gap-2 text-2xl font-bold">
     {{ peer.name }}
     <span class="rounded-full bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-500">{{ iface.name }}</span>
@@ -13,7 +13,7 @@
     <span class="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-700">imported</span>
     {% endif %}
   </h1>
-  <div class="flex gap-2">
+  <div class="flex flex-wrap gap-2">
     <form method="post" action="/peers/{{ peer.id }}/toggle">
       <button type="submit"
               class="rounded-md border border-slate-300 bg-white px-3 py-1.5 text-sm font-medium text-slate-600 hover:bg-slate-100">
@@ -48,7 +48,7 @@
   <div class="rounded-xl bg-white p-5 shadow-sm">
     <h3 class="mb-3 text-xs font-semibold uppercase tracking-wide text-slate-400">Details</h3>
     <dl class="space-y-2 text-sm">
-      <div class="flex justify-between gap-2">
+      <div class="flex items-baseline justify-between gap-2">
         <dt class="text-slate-500">Address</dt>
         <dd class="font-mono text-xs">{{ peer.address }}</dd>
       </div>
@@ -56,7 +56,7 @@
         <dt class="text-slate-500">Public key</dt>
         <dd class="mt-1 break-all font-mono text-xs text-slate-600">{{ peer.public_key }}</dd>
       </div>
-      <div class="flex justify-between gap-2">
+      <div class="flex items-baseline justify-between gap-2">
         <dt class="text-slate-500">Enabled</dt>
         <dd>
           {% if peer.enabled %}
@@ -66,17 +66,17 @@
           {% endif %}
         </dd>
       </div>
-      <div class="flex justify-between gap-2">
+      <div class="flex items-baseline justify-between gap-2">
         <dt class="text-slate-500">Created</dt>
         <dd>{{ peer.created_at.strftime("%Y-%m-%d %H:%M") }}</dd>
       </div>
       {% if peer.expires_at %}
-      <div class="flex justify-between gap-2">
+      <div class="flex items-baseline justify-between gap-2">
         <dt class="text-slate-500">Expires</dt>
         <dd>{{ peer.expires_at.strftime("%Y-%m-%d %H:%M") }}</dd>
       </div>
       {% endif %}
-      <div class="flex justify-between gap-2">
+      <div class="flex items-baseline justify-between gap-2">
         <dt class="text-slate-500">Usage</dt>
         <dd>
           {{ peer.cum_total | fmt_bytes }}
@@ -88,49 +88,13 @@
         </dd>
       </div>
     </dl>
-    <form method="post" action="/peers/{{ peer.id }}/update" class="mt-4 space-y-3 border-t border-slate-100 pt-4">
-      <label class="block text-sm font-medium text-slate-600">Note
-        <input name="note" value="{{ peer.note }}"
-               class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">
-      </label>
-      <label class="block text-sm font-medium text-slate-600">DNS
-        <input name="dns" value="{{ peer.dns }}" placeholder="server default"
-               class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">
-      </label>
-      <label class="block text-sm font-medium text-slate-600">Quota (GiB)
-        <input name="quota_gib" type="number" step="0.1" min="0" placeholder="unlimited"
-               value="{{ '%.1f' % (peer.quota_bytes / 1073741824) if peer.quota_bytes else '' }}"
-               class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">
-      </label>
-      <label class="block text-sm font-medium text-slate-600">Keepalive (s)
-        <input name="persistent_keepalive" type="number" min="0" max="3600"
-               value="{{ peer.persistent_keepalive if peer.persistent_keepalive is not none else '' }}"
-               placeholder="interface default ({{ iface.persistent_keepalive }})"
-               class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">
-        <span class="mt-1 block text-xs text-slate-400">0 disables keepalive (fixed-IP site-to-site peers). Empty = interface default.</span>
-      </label>
-      <label class="block text-sm font-medium text-slate-600">Site subnets behind this peer
-        <input name="extra_allowed_ips" value="{{ peer.extra_allowed_ips }}" placeholder="e.g. 192.168.5.0/24"
-               class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">
-        <span class="mt-1 block text-xs text-slate-400">Server-side AllowedIPs: routes these networks to this peer (site-to-site). Peer must forward traffic.</span>
-      </label>
-      <label class="block text-sm font-medium text-slate-600">Client routes (AllowedIPs)
-        <input name="client_allowed_ips" value="{{ peer.client_allowed_ips }}" placeholder="server default"
-               class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">
-        <span class="mt-1 block text-xs text-slate-400">What this client routes through the tunnel. Empty = server default. Full tunnel: 0.0.0.0/0, ::/0</span>
-      </label>
-      <button type="submit"
-              class="rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700">
-        Save
-      </button>
-    </form>
   </div>
 
   <div class="rounded-xl bg-white p-5 shadow-sm">
     <h3 class="mb-3 text-xs font-semibold uppercase tracking-wide text-slate-400">Live status</h3>
     {% if peer_status %}
     <dl class="space-y-2 text-sm">
-      <div class="flex justify-between gap-2">
+      <div class="flex items-baseline justify-between gap-2">
         <dt class="text-slate-500">Status</dt>
         <dd>
           {% if peer_status.online %}
@@ -140,15 +104,15 @@
           {% endif %}
         </dd>
       </div>
-      <div class="flex justify-between gap-2">
+      <div class="flex items-baseline justify-between gap-2">
         <dt class="text-slate-500">Endpoint</dt>
         <dd class="font-mono text-xs">{{ peer_status.endpoint or "-" }}</dd>
       </div>
-      <div class="flex justify-between gap-2">
+      <div class="flex items-baseline justify-between gap-2">
         <dt class="text-slate-500">Handshake</dt>
         <dd>{{ peer_status.latest_handshake.strftime("%Y-%m-%d %H:%M:%S") if peer_status.latest_handshake else "never" }}</dd>
       </div>
-      <div class="flex justify-between gap-2">
+      <div class="flex items-baseline justify-between gap-2">
         <dt class="text-slate-500">Session traffic</dt>
         <dd>RX {{ peer_status.rx_bytes | fmt_bytes }} / TX {{ peer_status.tx_bytes | fmt_bytes }}</dd>
       </div>
@@ -192,6 +156,48 @@
   </div>
 </div>
 
+<div class="mt-4 rounded-xl bg-white p-5 shadow-sm">
+  <h3 class="mb-3 text-xs font-semibold uppercase tracking-wide text-slate-400">Edit</h3>
+  <form method="post" action="/peers/{{ peer.id }}/update" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+    <label class="block text-sm font-medium text-slate-600">Note
+      <input name="note" value="{{ peer.note }}"
+             class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">
+    </label>
+    <label class="block text-sm font-medium text-slate-600">DNS
+      <input name="dns" value="{{ peer.dns }}" placeholder="server default"
+             class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">
+    </label>
+    <label class="block text-sm font-medium text-slate-600">Quota (GiB)
+      <input name="quota_gib" type="number" step="0.1" min="0" placeholder="unlimited"
+             value="{{ '%.1f' % (peer.quota_bytes / 1073741824) if peer.quota_bytes else '' }}"
+             class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">
+    </label>
+    <label class="block text-sm font-medium text-slate-600">Keepalive (s)
+      <input name="persistent_keepalive" type="number" min="0" max="3600"
+             value="{{ peer.persistent_keepalive if peer.persistent_keepalive is not none else '' }}"
+             placeholder="interface default ({{ iface.persistent_keepalive }})"
+             class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">
+      <span class="mt-1 block text-xs text-slate-400">0 disables keepalive (fixed-IP site-to-site peers). Empty = interface default.</span>
+    </label>
+    <label class="block text-sm font-medium text-slate-600">Site subnets behind this peer
+      <input name="extra_allowed_ips" value="{{ peer.extra_allowed_ips }}" placeholder="e.g. 192.168.5.0/24"
+             class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">
+      <span class="mt-1 block text-xs text-slate-400">Server-side AllowedIPs: routes these networks to this peer (site-to-site). Peer must forward traffic.</span>
+    </label>
+    <label class="block text-sm font-medium text-slate-600">Client routes (AllowedIPs)
+      <input name="client_allowed_ips" value="{{ peer.client_allowed_ips }}" placeholder="server default"
+             class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">
+      <span class="mt-1 block text-xs text-slate-400">What this client routes through the tunnel. Empty = server default. Full tunnel: 0.0.0.0/0, ::/0</span>
+    </label>
+    <div class="col-span-full">
+      <button type="submit"
+              class="rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700">
+        Save
+      </button>
+    </div>
+  </form>
+</div>
+
 {% if client_config %}
 <div class="mt-4 rounded-xl bg-white p-5 shadow-sm">
   <h3 class="mb-3 text-xs font-semibold uppercase tracking-wide text-slate-400">{{ peer.name }}.conf</h3>