From f5f13a3eba8db2b56aa08dffb9eec85b3b28f4ea Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Thu, 15 May 2025 22:43:51 +0800
Subject: [PATCH] style: adjust padding and layout in various components

* Updated padding in CustomCollapse for improved spacing.
* Modified Messages component to conditionally apply padding based on prompt visibility.
* Enhanced ModelListSearchBar by adding a flex display style for better alignment.
* Increased gap in ProviderSetting's HStack for improved layout consistency.
---
 src/renderer/src/components/CustomCollapse.tsx       |  2 +-
 src/renderer/src/pages/home/Messages/Messages.tsx    |  4 ++--
 .../settings/DisplaySettings/DisplaySettings.tsx     | 12 +++++-------
 .../settings/ProviderSettings/ModelListSearchBar.tsx |  2 +-
 .../settings/ProviderSettings/ProviderSetting.tsx    |  2 +-
 5 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/renderer/src/components/CustomCollapse.tsx b/src/renderer/src/components/CustomCollapse.tsx
index c02f45c60c..2828379399 100644
--- a/src/renderer/src/components/CustomCollapse.tsx
+++ b/src/renderer/src/components/CustomCollapse.tsx
@@ -36,7 +36,7 @@ const CustomCollapse: FC<CustomCollapseProps> = ({
 
   const defaultCollapseItemStyles = {
     header: {
-      padding: '8px 16px',
+      padding: '3px 16px',
       alignItems: 'center',
       justifyContent: 'space-between',
       background: 'var(--color-background-soft)',
diff --git a/src/renderer/src/pages/home/Messages/Messages.tsx b/src/renderer/src/pages/home/Messages/Messages.tsx
index 6da7985fd4..f69dc678aa 100644
--- a/src/renderer/src/pages/home/Messages/Messages.tsx
+++ b/src/renderer/src/pages/home/Messages/Messages.tsx
@@ -225,7 +225,7 @@ const Messages: React.FC<MessagesProps> = ({ assistant, topic, setActiveTopic })
   return (
     <Container
       id="messages"
-      style={{ maxWidth }}
+      style={{ maxWidth, paddingTop: showPrompt ? 10 : 0 }}
       key={assistant.id}
       ref={containerRef}
       $right={topicPosition === 'left'}>
@@ -319,7 +319,7 @@ interface ContainerProps {
 const Container = styled(Scrollbar)<ContainerProps>`
   display: flex;
   flex-direction: column-reverse;
-  padding: 10px 0 10px;
+  padding: 10px 0 20px;
   overflow-x: hidden;
   background-color: var(--color-background);
   z-index: 1;
diff --git a/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx b/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx
index 335f8ecbf4..ad93b8fa38 100644
--- a/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx
+++ b/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx
@@ -14,7 +14,7 @@ import {
 } from '@renderer/store/settings'
 import { ThemeMode } from '@renderer/types'
 import { Button, Input, Segmented, Switch } from 'antd'
-import { Minus, Plus } from 'lucide-react'
+import { Minus, Plus, RotateCcw } from 'lucide-react'
 import { FC, useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -141,12 +141,10 @@ const DisplaySettings: FC = () => {
             <ZoomValue>{Math.round(currentZoom * 100)}%</ZoomValue>
             <Button onClick={() => handleZoomFactor(0.1)} icon={<Plus size="14" />} />
             <Button
-              onClick={() => {
-                handleZoomFactor(0, true)
-              }}
-              style={{ marginLeft: 8 }}>
-              {t('settings.zoom.reset')}
-            </Button>
+              onClick={() => handleZoomFactor(0, true)}
+              style={{ marginLeft: 8 }}
+              icon={<RotateCcw size="14" />}
+            />
           </ZoomButtonGroup>
         </SettingRow>
         {isMac && (
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ModelListSearchBar.tsx b/src/renderer/src/pages/settings/ProviderSettings/ModelListSearchBar.tsx
index bf59cf2e50..8a9e7cd68d 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ModelListSearchBar.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ModelListSearchBar.tsx
@@ -78,7 +78,7 @@ const ModelListSearchBar: React.FC<ModelListSearchBarProps> = ({ onSearch }) =>
           visible: { opacity: 1, transition: { duration: 0.1, delay: 0.3, ease: 'easeInOut' } },
           hidden: { opacity: 0, transition: { duration: 0.1, ease: 'easeInOut' } }
         }}
-        style={{ cursor: 'pointer' }}
+        style={{ cursor: 'pointer', display: 'flex' }}
         onClick={() => setSearchVisible(true)}>
         <Tooltip title={t('models.search')} mouseEnterDelay={0.5}>
           <Search size={14} color="var(--color-icon)" />
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx b/src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx
index 2f58a924dd..31ea151cbb 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx
@@ -404,7 +404,7 @@ const ProviderSetting: FC<Props> = ({ provider: _provider }) => {
       {provider.id === 'copilot' && <GithubCopilotSettings provider={provider} setApiKey={setApiKey} />}
       <SettingSubtitle style={{ marginBottom: 5 }}>
         <Space align="center" style={{ width: '100%', justifyContent: 'space-between' }}>
-          <HStack alignItems="center" gap={5}>
+          <HStack alignItems="center" gap={8} mb={5}>
             <SettingSubtitle style={{ marginTop: 0 }}>{t('common.models')}</SettingSubtitle>
             {!isEmpty(models) && <ModelListSearchBar onSearch={setModelSearchText} />}
           </HStack>