From 52dec921f5ed66b158edf03b37e52d33516a23e7 Mon Sep 17 00:00:00 2001
From: v0 <v0[bot]@users.noreply.github.com>
Date: Wed, 4 Feb 2026 16:43:29 +0000
Subject: [PATCH] feat: adjust settings layout in advanced config popup

Display "Algorithm" and "Captcha Length" side by side for compact layout.

Co-authored-by: Simon <85533298+handsomezhuzhu@users.noreply.github.com>
---
 app/page.tsx | 72 +++++++++++++++++++++++++++-------------------------
 1 file changed, 37 insertions(+), 35 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 5d4c769..f3ead0c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -798,7 +798,7 @@ export default function TwoFactorAuth() {
                   {t.addToken}
                 </Button>
               </DialogTrigger>
-              <DialogContent className="max-w-md max-h-[85vh] overflow-y-auto">
+              <DialogContent className="max-w-md">
                 <DialogHeader>
                   <DialogTitle>{t.addNewToken}</DialogTitle>
                   <DialogDescription>{t.addNewTokenDesc}</DialogDescription>
@@ -864,40 +864,42 @@ export default function TwoFactorAuth() {
 
                       {showAdvanced && (
                         <div className="mt-4 space-y-4">
-                          <div className="space-y-2">
-                            <Label>{t.algorithm}</Label>
-                            <Select
-                              value={newToken.algorithm}
-                              onValueChange={(value: "SHA1" | "SHA256" | "SHA512") =>
-                                setNewToken({ ...newToken, algorithm: value })
-                              }
-                            >
-                              <SelectTrigger>
-                                <SelectValue />
-                              </SelectTrigger>
-                              <SelectContent>
-                                <SelectItem value="SHA1">{t.algorithmDefault}</SelectItem>
-                                <SelectItem value="SHA256">SHA-256</SelectItem>
-                                <SelectItem value="SHA512">SHA-512</SelectItem>
-                              </SelectContent>
-                            </Select>
-                          </div>
-                          <div className="space-y-2">
-                            <Label>{t.digits}</Label>
-                            <Select
-                              value={newToken.digits.toString()}
-                              onValueChange={(value) =>
-                                setNewToken({ ...newToken, digits: Number.parseInt(value) as 6 | 8 })
-                              }
-                            >
-                              <SelectTrigger>
-                                <SelectValue />
-                              </SelectTrigger>
-                              <SelectContent>
-                                <SelectItem value="6">{t.digitsDefault}</SelectItem>
-                                <SelectItem value="8">{t.digits8}</SelectItem>
-                              </SelectContent>
-                            </Select>
+                          <div className="grid grid-cols-2 gap-4">
+                            <div className="space-y-2">
+                              <Label>{t.algorithm}</Label>
+                              <Select
+                                value={newToken.algorithm}
+                                onValueChange={(value: "SHA1" | "SHA256" | "SHA512") =>
+                                  setNewToken({ ...newToken, algorithm: value })
+                                }
+                              >
+                                <SelectTrigger>
+                                  <SelectValue />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  <SelectItem value="SHA1">{t.algorithmDefault}</SelectItem>
+                                  <SelectItem value="SHA256">SHA-256</SelectItem>
+                                  <SelectItem value="SHA512">SHA-512</SelectItem>
+                                </SelectContent>
+                              </Select>
+                            </div>
+                            <div className="space-y-2">
+                              <Label>{t.digits}</Label>
+                              <Select
+                                value={newToken.digits.toString()}
+                                onValueChange={(value) =>
+                                  setNewToken({ ...newToken, digits: Number.parseInt(value) as 6 | 8 })
+                                }
+                              >
+                                <SelectTrigger>
+                                  <SelectValue />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  <SelectItem value="6">{t.digitsDefault}</SelectItem>
+                                  <SelectItem value="8">{t.digits8}</SelectItem>
+                                </SelectContent>
+                              </Select>
+                            </div>
                           </div>
                           <div className="space-y-2">
                             <Label>{t.period}</Label>