refactor(styles): update dropdown and modal styles for improved layout and consistency across components

src/renderer/src/assets/styles/ant.scss

@@ -197,25 +197,29 @@
 }
 
 .ant-dropdown-menu .ant-dropdown-menu-sub {
-  max-height: 350px;
+  max-height: 50vh;
   width: max-content;
   overflow-y: auto;
   overflow-x: hidden;
-}
-
-.ant-dropdown-menu {
-  max-height: 40vh;
-  overflow-y: auto;
   border: 0.5px solid var(--color-border);
   border-radius: 12px;
+}
+.ant-dropdown {
+  .ant-dropdown-menu {
+    max-height: 50vh;
+    overflow-y: auto;
+    border: 0.5px solid var(--color-border);
+    border-radius: 12px;
 
-  .ant-dropdown-menu-item {
-    padding: 5px;
+    .ant-dropdown-menu-item {
+      padding: 5px;
+    }
+  }
+  .ant-dropdown-arrow + .ant-dropdown-menu {
+    border: none;
   }
 }
-.ant-dropdown-arrow + .ant-dropdown-menu {
-  border: none;
-}
+
 .ant-popover-inner {
   border: 0.5px solid var(--color-border);
   border-radius: 12px;
@@ -230,6 +234,9 @@
   }
 }
 .ant-modal {
+  .ant-modal-confirm-title {
+    padding: 16px 0 16px 0;
+  }
   .ant-modal-content {
     border-radius: 12px;
     border: 0.5px solid var(--color-border);
@@ -246,6 +253,9 @@
     .ant-modal-footer {
       padding: 0 16px 8px 16px;
     }
+    .ant-modal-confirm-btns {
+      margin-bottom: 8px;
+    }
   }
 }
 

src/renderer/src/components/Selector.tsx

@@ -1,7 +1,7 @@
 import { ConfigProvider, Dropdown } from 'antd'
 import { Check, ChevronsUpDown } from 'lucide-react'
 import { ReactNode, useMemo, useState } from 'react'
-import styled, { createGlobalStyle, css } from 'styled-components'
+import styled, { css } from 'styled-components'
 
 interface SelectorOption<V = string | number> {
   label: string | ReactNode
@@ -81,7 +81,6 @@ const Selector = <V extends string | number>({
           }
         }
       }}>
-      <SelectorStyle />
       <Dropdown
         overlayClassName="selector-dropdown"
         menu={{ items, onClick }}
@@ -98,14 +97,6 @@ const Selector = <V extends string | number>({
   )
 }
 
-const SelectorStyle = createGlobalStyle`
-  .ant-dropdown-menu {
-    max-height: 40vh;
-    overflow-y: auto;
-    border: 0.5px solid var(--color-border);
-  }
-`
-
 const LabelIcon = styled(ChevronsUpDown)`
   border-radius: 4px;
   padding: 2px 0;

src/renderer/src/context/AntdProvider.tsx

@@ -73,7 +73,7 @@ const AntdProvider: FC<PropsWithChildren> = ({ children }) => {
         token: {
           colorPrimary: colorPrimary,
           fontFamily: 'var(--font-family)',
-          colorBgMask: _theme === 'dark' ? 'rgba(0,0,0,0.7)' : 'rgba(255,255,255,0.7)'
+          colorBgMask: _theme === 'dark' ? 'rgba(0,0,0,0.7)' : 'rgba(255,255,255,0.8)'
         }
       }}>
       {children}

src/renderer/src/pages/agents/AgentsPage.tsx

@@ -321,7 +321,7 @@ const AgentDescription = styled.div`
 `
 
 const AgentPrompt = styled.div`
-  max-height: 60vh;
+  max-height: 50vh;
   overflow-y: scroll;
   background-color: var(--color-background-soft);
   padding: 8px;

src/renderer/src/pages/agents/components/AddAgentPopup.tsx

@@ -150,7 +150,7 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
       maskClosable={false}
       afterClose={onClose}
       okText={t('agents.add.title')}
-      width={800}
+      width={600}
       transitionName="animation-move-down"
       centered>
       <Form

src/renderer/src/pages/settings/AssistantSettings/index.tsx

@@ -92,7 +92,10 @@ const AssistantSettingPopupContainer: React.FC<Props> = ({ resolve, tab, ...prop
           overflow: 'hidden',
           background: 'var(--color-background)'
         },
-        header: { padding: '10px 15px', borderBottom: '0.5px solid var(--color-border)', margin: 0 }
+        header: { padding: '10px 15px', borderBottom: '0.5px solid var(--color-border)', margin: 0, borderRadius: 0 },
+        body: {
+          padding: 0
+        }
       }}
       width="70vw"
       height="80vh"