From 12d284cd22bf936f5cbde2c390bdaba55493a54a Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Fri, 26 Dec 2025 12:05:37 +0800
Subject: [PATCH] fix(layout): fixed line clamp for config items on small
 screens (#2792)

---
 .../src/components/settings/color/ThemeColorSelector.tsx  | 8 ++++----
 apps/readest-app/src/styles/globals.css                   | 4 ++++
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/apps/readest-app/src/components/settings/color/ThemeColorSelector.tsx b/apps/readest-app/src/components/settings/color/ThemeColorSelector.tsx
index 5c6e1dde..9a7f984f 100644
--- a/apps/readest-app/src/components/settings/color/ThemeColorSelector.tsx
+++ b/apps/readest-app/src/components/settings/color/ThemeColorSelector.tsx
@@ -42,7 +42,7 @@ const ThemeColorSelector: React.FC<ThemeColorSelectorProps> = ({
               }
               e.stopPropagation();
             }}
-            className={`relative flex cursor-pointer flex-col items-center justify-center rounded-lg p-4 shadow-md ${
+            className={`relative flex cursor-pointer flex-col items-center justify-center rounded-lg px-2 py-4 shadow-md ${
               themeColor === name ? 'ring-2 ring-indigo-500 ring-offset-2' : ''
             }`}
             style={{
@@ -64,7 +64,7 @@ const ThemeColorSelector: React.FC<ThemeColorSelectorProps> = ({
             ) : (
               <MdRadioButtonUnchecked size={iconSize24} />
             )}
-            <span>{_(label)}</span>
+            <span className='max-w-full truncate'>{_(label)}</span>
             {isCustomizale && themeColor === name && (
               <button onClick={() => onEditTheme(name)}>
                 <CgColorPicker size={iconSize16} className='absolute right-2 top-2' />
@@ -73,11 +73,11 @@ const ThemeColorSelector: React.FC<ThemeColorSelectorProps> = ({
           </button>
         ))}
         <button
-          className='relative flex cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed p-4 shadow-md'
+          className='relative flex cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed px-2 py-4 shadow-md'
           onClick={onCreateTheme}
         >
           <PiPlus size={iconSize24} />
-          <span>{_('Custom')}</span>
+          <span className='max-w-full truncate'>{_('Custom')}</span>
         </button>
       </div>
     </div>
diff --git a/apps/readest-app/src/styles/globals.css b/apps/readest-app/src/styles/globals.css
index f362192c..81c30cf2 100644
--- a/apps/readest-app/src/styles/globals.css
+++ b/apps/readest-app/src/styles/globals.css
@@ -251,6 +251,10 @@ foliate-fxl {
   @apply hover:bg-base-100/50;
 }
 
+.config-item > span {
+  @apply line-clamp-2;
+}
+
 .collapse-arrow > .collapse-title:after {
   top: var(--top-override, default-value);
   inset-inline-end: var(--end-override, default-value);