refactor: increase css editor height, fix EditMcpJsonPopup (#7535)

* refactor: increase css editor height

* fix: lint warnings

* refactor: use vh for height

* fix: editmcpjsonpopup editor unavailable after deleting all the code

src/renderer/src/pages/settings/DataSettings/DataSettings.tsx

@@ -546,7 +546,7 @@ const DataSettings: FC = () => {
     }
 
     handleDataMigration()
-  }, [])
+  }, [t])
 
   const onSkipBackupFilesChange = (value: boolean) => {
     setSkipBackupFile(value)

src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx

@@ -315,9 +315,9 @@ const DisplaySettings: FC = () => {
           language="css"
           placeholder={t('settings.display.custom.css.placeholder')}
           onChange={(value) => dispatch(setCustomCss(value))}
-          height="350px"
+          height="60vh"
           options={{
-            collapsible: true,
+            collapsible: false,
             wrappable: true,
             autocompletion: true,
             lineNumbers: true,

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

@@ -3,7 +3,7 @@ import { TopView } from '@renderer/components/TopView'
 import { useAppDispatch, useAppSelector } from '@renderer/store'
 import { setMCPServers } from '@renderer/store/mcp'
 import { MCPServer } from '@renderer/types'
-import { Modal, Typography } from 'antd'
+import { Modal, Spin, Typography } from 'antd'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -16,12 +16,14 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
   const [jsonConfig, setJsonConfig] = useState('')
   const [jsonSaving, setJsonSaving] = useState(false)
   const [jsonError, setJsonError] = useState('')
+  const [isLoading, setIsLoading] = useState(true)
   const mcpServers = useAppSelector((state) => state.mcp.servers)
 
   const dispatch = useAppDispatch()
   const { t } = useTranslation()
 
   useEffect(() => {
+    setIsLoading(true)
     try {
       const mcpServersObj: Record<string, any> = {}
 
@@ -40,6 +42,8 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
     } catch (error) {
       console.error('Failed to format JSON:', error)
       setJsonError(t('settings.mcp.jsonFormatError'))
+    } finally {
+      setIsLoading(false)
     }
   }, [mcpServers, t])
 
@@ -118,24 +122,24 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
           {jsonError ? <span style={{ color: 'red' }}>{jsonError}</span> : ''}
         </Typography.Text>
       </div>
-      {jsonConfig && (
+      {isLoading ? (
-        <div style={{ marginBottom: '16px' }}>
+        <Spin size="large" />
-          <CodeEditor
+      ) : (
-            value={jsonConfig}
+        <CodeEditor
-            language="json"
+          value={jsonConfig}
-            onChange={(value) => setJsonConfig(value)}
+          language="json"
-            maxHeight="60vh"
+          onChange={(value) => setJsonConfig(value)}
-            options={{
+          height="60vh"
-              lint: true,
+          options={{
-              collapsible: true,
+            lint: true,
-              wrappable: true,
+            collapsible: false,
-              lineNumbers: true,
+            wrappable: true,
-              foldGutter: true,
+            lineNumbers: true,
-              highlightActiveLine: true,
+            foldGutter: true,
-              keymap: true
+            highlightActiveLine: true,
-            }}
+            keymap: true
-          />
+          }}
-        </div>
+        />
       )}
       <Typography.Text type="secondary">{t('settings.mcp.jsonModeHint')}</Typography.Text>
     </Modal>