refactor(mcp settings): enhance NpxSearch component layout and styling (#4053)

* refactor: mcp setting ui refactor

* refactor(mcp settings): enhance NpxSearch component layout and styling

src/renderer/src/pages/settings/MCPSettings/NpxSearch.tsx

@@ -8,6 +8,7 @@ import { Button, Card, Flex, Input, Space, Spin, Tag, Typography } from 'antd'
 import { npxFinder } from 'npx-scope-finder'
 import { type FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import styled, { css } from 'styled-components'
 
 import { SettingDivider, SettingGroup, SettingTitle } from '..'
 
@@ -27,7 +28,7 @@ let _searchResults: SearchResult[] = []
 const NpxSearch: FC = () => {
   const { theme } = useTheme()
   const { t } = useTranslation()
-  const { Paragraph, Text, Link } = Typography
+  const { Text, Link } = Typography
 
   // Add new state variables for npm scope search
   const [npmScope, setNpmScope] = useState('@modelcontextprotocol')
@@ -87,12 +88,12 @@ const NpxSearch: FC = () => {
   }
 
   return (
-    <SettingGroup theme={theme}>
-      <SettingTitle>{t('settings.mcp.npx_list.title')}</SettingTitle>
+    <SettingGroup theme={theme} css={SettingGroupCss}>
+      <div>
+        <SettingTitle>
+          {t('settings.mcp.npx_list.title')} <Text type="secondary">{t('settings.mcp.npx_list.desc')}</Text>
+        </SettingTitle>
         <SettingDivider />
-      <Paragraph type="secondary" style={{ margin: '0 0 10px 0' }}>
-        {t('settings.mcp.npx_list.desc')}
-      </Paragraph>
 
         <Space direction="vertical" style={{ width: '100%' }}>
           <Space.Compact style={{ width: '100%', marginBottom: 10 }}>
@@ -106,7 +107,6 @@ const NpxSearch: FC = () => {
               {t('settings.mcp.npx_list.search')}
             </Button>
           </Space.Compact>
-
           <HStack alignItems="center" mt="-5px" mb="5px">
             {npmScopes.map((scope) => (
               <Tag
@@ -122,7 +122,10 @@ const NpxSearch: FC = () => {
               </Tag>
             ))}
           </HStack>
+        </Space>
+      </div>
 
+      <ResultList>
         {searchLoading ? (
           <div style={{ textAlign: 'center', padding: '20px' }}>
             <Spin />
@@ -139,7 +142,7 @@ const NpxSearch: FC = () => {
               }
               extra={
                 <Flex>
-                  <Tag bordered={false} color="magenta">
+                  <Tag bordered={false} color="processing">
                     v{record.version}
                   </Tag>
                   <Button
@@ -162,22 +165,38 @@ const NpxSearch: FC = () => {
                 </Flex>
               }>
               <Space direction="vertical" size="small">
-                <Text ellipsis={{ tooltip: true }}>{record.description}</Text>
-                <Text ellipsis={{ tooltip: true }} type="secondary">
+                <Text>{record.description}</Text>
+                <Text type="secondary">
                   {t('settings.mcp.npx_list.usage')}: {record.usage}
                 </Text>
-                <Text ellipsis={{ tooltip: true }}>
                 <Link href={record.npmLink} target="_blank" rel="noopener noreferrer">
                   {record.npmLink}
                 </Link>
-                </Text>
               </Space>
             </Card>
           ))
         ) : null}
-      </Space>
+      </ResultList>
     </SettingGroup>
   )
 }
 
+const SettingGroupCss = css`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 0;
+`
+
+const ResultList = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: calc(100% + 10px);
+  padding-right: 4px;
+  overflow-y: scroll;
+`
+
 export default NpxSearch

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

@@ -1,7 +1,7 @@
 import { ThemeMode } from '@renderer/types'
 import { Divider } from 'antd'
 import Link from 'antd/es/typography/Link'
-import styled from 'styled-components'
+import styled, { CSSProp } from 'styled-components'
 
 export const SettingContainer = styled.div<{ theme?: ThemeMode }>`
   display: flex;
@@ -80,7 +80,7 @@ export const SettingHelpLink = styled(Link)`
   margin: 0 5px;
 `
 
-export const SettingGroup = styled.div<{ theme?: ThemeMode }>`
+export const SettingGroup = styled.div<{ theme?: ThemeMode; css?: CSSProp }>`
   margin-bottom: 20px;
   border-radius: 8px;
   border: 0.5px solid var(--color-border);