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.

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>