From 515c9b9174983be9e3901b35575fc76f30c10a22 Mon Sep 17 00:00:00 2001
From: dtoro <d.toro.v@pm.me>
Date: Mon, 13 Jul 2026 23:16:50 +0200
Subject: [PATCH] fix(web): stack auth options vertically in config screen

---
 web/src/pages/Config.svelte | 76 +++++++++++++++++--------------------
 1 file changed, 35 insertions(+), 41 deletions(-)

diff --git a/web/src/pages/Config.svelte b/web/src/pages/Config.svelte
index a1f2301..3a5dc10 100644
--- a/web/src/pages/Config.svelte
+++ b/web/src/pages/Config.svelte
@@ -135,50 +135,44 @@
           </Button>
         </div>
       {:else}
-        <div class="flex items-center gap-3">
-          <Separator decorative class="flex-1" />
-          <span class="text-[11px] font-medium uppercase tracking-widest text-muted-foreground/60">authenticate with</span>
-          <Separator decorative class="flex-1" />
-        </div>
-
         <!-- Auth options: Authentik + token -->
-        <div class="flex w-full gap-3">
-          <!-- Authentik column -->
-          <div class="flex flex-1 flex-col rounded-xl border border-white/5 bg-background/40 p-4">
-            <p class="mb-3 text-center text-xs text-muted-foreground">Single sign-on</p>
-            <Button
-              type="button"
-              variant="secondary"
-              disabled={oidcLoggingIn}
-              onclick={loginWithAuthentik}
-              class="w-full gap-2"
-            >
-              <LogIn class="size-4" />
-              {oidcLoggingIn ? 'Redirecting…' : 'Login with Authentik'}
-            </Button>
+        <div class="flex w-full flex-col gap-3">
+          <!-- Authentik row -->
+          <Button
+            type="button"
+            variant="secondary"
+            disabled={oidcLoggingIn}
+            onclick={loginWithAuthentik}
+            class="w-full gap-2"
+          >
+            <LogIn class="size-4" />
+            {oidcLoggingIn ? 'Redirecting…' : 'Login with Authentik'}
+          </Button>
+
+          <div class="flex items-center gap-3">
+            <Separator decorative class="flex-1" />
+            <span class="text-[10px] font-medium uppercase tracking-widest text-muted-foreground/40">or use</span>
+            <Separator decorative class="flex-1" />
           </div>
 
-          <!-- Token column -->
-          <div class="flex flex-1 flex-col rounded-xl border border-white/5 bg-background/40 p-4">
-            <p class="mb-3 text-center text-xs text-muted-foreground">Access token</p>
-            <form
-              class="flex flex-col gap-2.5"
-              onsubmit={(e) => { e.preventDefault(); connect() }}
-            >
-              <div class="relative">
-                <Lock class="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground/50" />
-                <Input
-                  type="password"
-                  placeholder="Bearer token"
-                  class="pl-8 text-sm"
-                  bind:value={token}
-                />
-              </div>
-              <Button type="submit" disabled={connecting} size="sm" class="w-full gap-1.5">
-                {connecting ? 'Connecting…' : 'Connect'}
-              </Button>
-            </form>
-          </div>
+          <!-- Token row -->
+          <form
+            class="flex flex-col gap-2.5"
+            onsubmit={(e) => { e.preventDefault(); connect() }}
+          >
+            <div class="relative">
+              <Lock class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground/50" />
+              <Input
+                type="password"
+                placeholder="Bearer token"
+                class="pl-9"
+                bind:value={token}
+              />
+            </div>
+            <Button type="submit" disabled={connecting} class="w-full">
+              {connecting ? 'Connecting…' : 'Connect'}
+            </Button>
+          </form>
         </div>
       {/if}