From 89a6d817f1454b2f1e9bc637949eecaaac616447 Mon Sep 17 00:00:00 2001
From: beyondkmp <beyondkmp@gmail.com>
Date: Wed, 24 Dec 2025 13:25:37 +0800
Subject: [PATCH] fix(display): improve font selector for long font names
 (#12100)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(display): improve font selector for long font names

- Increase Select width from 200px to 280px
- Increase SelectRow container width from 300px to 380px
- Add Tooltip to show full font name on hover
- Add text-overflow ellipsis for long font names

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor(DisplaySettings): replace span with div and use CSS class for truncation

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
Co-authored-by: icarus <eurfelux@gmail.com>
---
 .../DisplaySettings/DisplaySettings.tsx       | 27 ++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx b/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx
index 49b3b386a9..444fba569f 100644
--- a/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx
+++ b/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx
@@ -18,7 +18,7 @@ import {
   setSidebarIcons
 } from '@renderer/store/settings'
 import { ThemeMode } from '@renderer/types'
-import { Button, ColorPicker, Segmented, Select, Switch } from 'antd'
+import { Button, ColorPicker, Segmented, Select, Switch, Tooltip } from 'antd'
 import { Minus, Monitor, Moon, Plus, Sun } from 'lucide-react'
 import type { FC } from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
@@ -196,6 +196,21 @@ const DisplaySettings: FC = () => {
     [t]
   )
 
+  const renderFontOption = useCallback(
+    (font: string) => (
+      <Tooltip title={font} placement="left" mouseEnterDelay={0.5}>
+        <div
+          className="truncate"
+          style={{
+            fontFamily: font
+          }}>
+          {font}
+        </div>
+      </Tooltip>
+    ),
+    []
+  )
+
   return (
     <SettingContainer theme={theme}>
       <SettingGroup theme={theme}>
@@ -292,7 +307,7 @@ const DisplaySettings: FC = () => {
           <SettingRowTitle>{t('settings.display.font.global')}</SettingRowTitle>
           <SelectRow>
             <Select
-              style={{ width: 200 }}
+              style={{ width: 280 }}
               placeholder={t('settings.display.font.select')}
               options={[
                 {
@@ -303,7 +318,7 @@ const DisplaySettings: FC = () => {
                   ),
                   value: ''
                 },
-                ...fontList.map((font) => ({ label: <span style={{ fontFamily: font }}>{font}</span>, value: font }))
+                ...fontList.map((font) => ({ label: renderFontOption(font), value: font }))
               ]}
               value={userTheme.userFontFamily || ''}
               onChange={(font) => handleUserFontChange(font)}
@@ -324,7 +339,7 @@ const DisplaySettings: FC = () => {
           <SettingRowTitle>{t('settings.display.font.code')}</SettingRowTitle>
           <SelectRow>
             <Select
-              style={{ width: 200 }}
+              style={{ width: 280 }}
               placeholder={t('settings.display.font.select')}
               options={[
                 {
@@ -335,7 +350,7 @@ const DisplaySettings: FC = () => {
                   ),
                   value: ''
                 },
-                ...fontList.map((font) => ({ label: <span style={{ fontFamily: font }}>{font}</span>, value: font }))
+                ...fontList.map((font) => ({ label: renderFontOption(font), value: font }))
               ]}
               value={userTheme.userCodeFontFamily || ''}
               onChange={(font) => handleUserCodeFontChange(font)}
@@ -480,7 +495,7 @@ const SelectRow = styled.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  width: 300px;
+  width: 380px;
 `
 
 export default DisplaySettings