From f033776dc456e8650857dae052bc97ec1e1868ff Mon Sep 17 00:00:00 2001
From: JSR <pandajsr72@gmail.com>
Date: Sun, 5 Jul 2026 16:26:07 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BA=91=E5=90=8C=E6=AD=A5=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E5=9B=BE=E6=A0=87=E7=A7=BB=E8=87=B3=E5=8F=B3=E4=BE=A7?=
 =?UTF-8?q?=E5=B9=B6=E5=9E=82=E7=9B=B4=E5=B1=85=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/Settings.tsx | 78 ++++++++++++++++++++++++-------------
 1 file changed, 50 insertions(+), 28 deletions(-)

diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index b8826db..1ec67ea 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -1382,21 +1382,32 @@ export const Settings: React.FC<{
                       syncMethod === "postgresql" ? "var(--ant-color-primary-bg)" : undefined,
                   }}
                 >
-                  <Radio value="postgresql">
-                    <Space>
-                      <DatabaseOutlined />
-                      <span style={{ fontWeight: 500 }}>{t("settings.cloudSync.postgresql")}</span>
-                    </Space>
-                    <div
-                      style={{
-                        fontSize: "12px",
-                        color: "var(--ss-text-secondary)",
-                        marginTop: 4,
-                        marginLeft: 22,
-                      }}
-                    >
-                      {t("settings.cloudSync.postgresqlDesc")}
+                  <Radio
+                    value="postgresql"
+                    styles={{
+                      root: { width: "100%", alignItems: "center" },
+                      label: { display: "flex", alignItems: "center", flex: 1, gap: 8 },
+                    }}
+                  >
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <div style={{ fontWeight: 500 }}>{t("settings.cloudSync.postgresql")}</div>
+                      <div
+                        style={{
+                          fontSize: "12px",
+                          color: "var(--ss-text-secondary)",
+                          marginTop: 4,
+                        }}
+                      >
+                        {t("settings.cloudSync.postgresqlDesc")}
+                      </div>
                     </div>
+                    <DatabaseOutlined
+                      style={{
+                        fontSize: "26px",
+                        color: "var(--ant-color-primary)",
+                        flexShrink: 0,
+                      }}
+                    />
                   </Radio>
                 </Card>
                 <Card
@@ -1409,21 +1420,32 @@ export const Settings: React.FC<{
                       syncMethod === "sectl_cloud" ? "var(--ant-color-primary-bg)" : undefined,
                   }}
                 >
-                  <Radio value="sectl_cloud">
-                    <Space>
-                      <CloudOutlined />
-                      <span style={{ fontWeight: 500 }}>{t("settings.cloudSync.sectlCloud")}</span>
-                    </Space>
-                    <div
-                      style={{
-                        fontSize: "12px",
-                        color: "var(--ss-text-secondary)",
-                        marginTop: 4,
-                        marginLeft: 22,
-                      }}
-                    >
-                      {t("settings.cloudSync.sectlCloudDesc")}
+                  <Radio
+                    value="sectl_cloud"
+                    styles={{
+                      root: { width: "100%", alignItems: "center" },
+                      label: { display: "flex", alignItems: "center", flex: 1, gap: 8 },
+                    }}
+                  >
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <div style={{ fontWeight: 500 }}>{t("settings.cloudSync.sectlCloud")}</div>
+                      <div
+                        style={{
+                          fontSize: "12px",
+                          color: "var(--ss-text-secondary)",
+                          marginTop: 4,
+                        }}
+                      >
+                        {t("settings.cloudSync.sectlCloudDesc")}
+                      </div>
                     </div>
+                    <CloudOutlined
+                      style={{
+                        fontSize: "26px",
+                        color: "var(--ant-color-primary)",
+                        flexShrink: 0,
+                      }}
+                    />
                   </Radio>
                 </Card>
               </Space>