From f37d38d4e294bf5338ce7d5f84a0f3ed84a3cec1 Mon Sep 17 00:00:00 2001
From: jarvis2f <137974272+jarvis2f@users.noreply.github.com>
Date: Mon, 23 Dec 2024 11:22:47 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20Optimize=20the=20layout=20a?=
 =?UTF-8?q?nd=20style=20of=20the=20settings=20dialog=20and=20proxy=20compo?=
 =?UTF-8?q?nents.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/proxy-ping.tsx      |  2 +-
 web/src/components/proxys.tsx          | 17 +++++++++--------
 web/src/components/settings-dialog.tsx |  6 ++----
 web/src/components/settings-form.tsx   |  6 +++---
 4 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/web/src/components/proxy-ping.tsx b/web/src/components/proxy-ping.tsx
index 577a7f4..3e1d874 100644
--- a/web/src/components/proxy-ping.tsx
+++ b/web/src/components/proxy-ping.tsx
@@ -35,7 +35,7 @@ export default function ProxyPing({ accountId }: { accountId: string }) {
             {!isLoading && error && <span>Connection error</span>}
             {!isLoading && data && (
               <div className="flex items-center space-x-2">
-                <span>Ping: {(data.ping * 1000).toFixed(0)}ms</span>
+                <span className="text-sm">{(data.ping * 1000).toFixed(0)} ms</span>
               </div>
             )}
           </div>
diff --git a/web/src/components/proxys.tsx b/web/src/components/proxys.tsx
index 7b0a301..4e69249 100644
--- a/web/src/components/proxys.tsx
+++ b/web/src/components/proxys.tsx
@@ -159,7 +159,7 @@ export default function Proxys({
           <Plus className="mr-2 h-5 w-5" /> Add Proxy
         </Button>
       </div>
-      <div className="grid grid-cols-1 gap-6 sm:grid-cols-3 lg:grid-cols-4">
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-3 2xl:grid-cols-4">
         {proxys.map((proxy) => (
           <Card
             key={proxy.name}
@@ -212,13 +212,14 @@ export default function Proxys({
         ))}
       </div>
       {enableSelect && (
-        <Button
-          className="absolute bottom-4 right-4"
-          disabled={isToggleProxyMutating}
-          onClick={() => handleProxySubmit()}
-        >
-          Submit
-        </Button>
+        <div className="absolute bottom-0 right-0 flex items-center space-x-4">
+          <Button
+            disabled={isToggleProxyMutating}
+            onClick={() => handleProxySubmit()}
+          >
+            Submit
+          </Button>
+        </div>
       )}
       <Dialog open={isDialogOpen} onOpenChange={handleCloseDialog}>
         <DialogContent>
diff --git a/web/src/components/settings-dialog.tsx b/web/src/components/settings-dialog.tsx
index 20ec031..4e80918 100644
--- a/web/src/components/settings-dialog.tsx
+++ b/web/src/components/settings-dialog.tsx
@@ -47,10 +47,8 @@ export const SettingsDialog: React.FC = () => {
             <TabsTrigger value="statistics">Statistics</TabsTrigger>
             <TabsTrigger value="proxys">Proxys</TabsTrigger>
           </TabsList>
-          <TabsContent value="general" className="h-full">
-            <div className="flex flex-col overflow-hidden">
-              <SettingsForm />
-            </div>
+          <TabsContent value="general" className="overflow-hidden">
+            <SettingsForm />
           </TabsContent>
           <TabsContent value="statistics" className="h-full">
             <div className="flex flex-col overflow-y-scroll">
diff --git a/web/src/components/settings-form.tsx b/web/src/components/settings-form.tsx
index 6c81b34..f4ddd04 100644
--- a/web/src/components/settings-form.tsx
+++ b/web/src/components/settings-form.tsx
@@ -36,9 +36,9 @@ export default function SettingsForm() {
   return (
     <form
       onSubmit={handleSave}
-      className="flex h-full flex-col"
+      className="flex h-full flex-col overflow-hidden"
     >
-      <div className="flex flex-1 flex-col space-y-4 overflow-y-scroll">
+      <div className="flex flex-col space-y-4 overflow-y-scroll">
         <p className="rounded-md bg-gray-50 p-2 text-sm text-muted-foreground shadow">
           <Bell className="mr-2 inline-block h-4 w-4" />
           These settings will be applied to all accounts.
@@ -134,7 +134,7 @@ export default function SettingsForm() {
           </div>
         </div>
       </div>
-      <div className="mt-2 flex justify-end">
+      <div className="mt-2 flex flex-1 justify-end">
         <Button type="submit">Submit</Button>
       </div>
     </form>