From e273ddcfb0ffd560b46e0850a80ce727449b0a71 Mon Sep 17 00:00:00 2001
From: beyondkmp <beyondkmp@gmail.com>
Date: Wed, 9 Jul 2025 18:05:32 +0800
Subject: [PATCH] fix(LocalBackupSettings): update input and select styles for
 better responsiveness (#7977)

refactor(LocalBackupSettings): update input and select styles for better responsiveness

- Adjusted the input field to have a flexible width between 200 and 400 pixels.
- Modified select components to use a minimum width of 120 pixels for improved layout consistency.
- Enhanced onChange handlers for select components to ensure proper value handling.
---
 .../settings/DataSettings/LocalBackupSettings.tsx  | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/renderer/src/pages/settings/DataSettings/LocalBackupSettings.tsx b/src/renderer/src/pages/settings/DataSettings/LocalBackupSettings.tsx
index 1defa7549a..077ee96bbf 100644
--- a/src/renderer/src/pages/settings/DataSettings/LocalBackupSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/LocalBackupSettings.tsx
@@ -187,8 +187,8 @@ const LocalBackupSettings: FC = () => {
           <Input
             value={localBackupDir}
             readOnly
-            style={{ width: 250 }}
             placeholder={t('settings.data.local.directory.placeholder')}
+            style={{ minWidth: 200, maxWidth: 400, flex: 1 }}
           />
           <Button icon={<FolderOpenOutlined />} onClick={handleBrowseDirectory}>
             {t('common.browse')}
@@ -213,7 +213,11 @@ const LocalBackupSettings: FC = () => {
       <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.data.local.autoSync')}</SettingRowTitle>
-        <Select value={syncInterval} onChange={onSyncIntervalChange} disabled={!localBackupDir} style={{ width: 120 }}>
+        <Select
+          value={syncInterval}
+          onChange={(value) => onSyncIntervalChange(value as number)}
+          disabled={!localBackupDir}
+          style={{ minWidth: 120 }}>
           <Select.Option value={0}>{t('settings.data.local.autoSync.off')}</Select.Option>
           <Select.Option value={1}>{t('settings.data.local.minute_interval', { count: 1 })}</Select.Option>
           <Select.Option value={5}>{t('settings.data.local.minute_interval', { count: 5 })}</Select.Option>
@@ -229,7 +233,11 @@ const LocalBackupSettings: FC = () => {
       <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.data.local.maxBackups')}</SettingRowTitle>
-        <Select value={maxBackups} onChange={onMaxBackupsChange} disabled={!localBackupDir} style={{ width: 120 }}>
+        <Select
+          value={maxBackups}
+          onChange={(value) => onMaxBackupsChange(value as number)}
+          disabled={!localBackupDir}
+          style={{ minWidth: 120 }}>
           <Select.Option value={0}>{t('settings.data.local.maxBackups.unlimited')}</Select.Option>
           <Select.Option value={1}>1</Select.Option>
           <Select.Option value={3}>3</Select.Option>