✨ feat: Optimize the layout and style of the settings dialog and proxy components.

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>

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
+        <div className="absolute bottom-0 right-0 flex items-center space-x-4">
-          className="absolute bottom-4 right-4"
+          <Button
-          disabled={isToggleProxyMutating}
+            disabled={isToggleProxyMutating}
-          onClick={() => handleProxySubmit()}
+            onClick={() => handleProxySubmit()}
-        >
+          >
-          Submit
+            Submit
-        </Button>
+          </Button>
+        </div>
       )}
       <Dialog open={isDialogOpen} onOpenChange={handleCloseDialog}>
         <DialogContent>

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">
+          <TabsContent value="general" className="overflow-hidden">
-            <div className="flex flex-col overflow-hidden">
+            <SettingsForm />
-              <SettingsForm />
-            </div>
           </TabsContent>
           <TabsContent value="statistics" className="h-full">
             <div className="flex flex-col overflow-y-scroll">

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>