From ef1a1eab98e7ec9b4877695eb467aeca5a8dec7c Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Wed, 20 Aug 2025 18:14:45 +0800
Subject: [PATCH] layout: consistent label font weight for settings panels
 (#1856)

---
 .../src/app/reader/components/settings/ColorPanel.tsx    | 2 +-
 .../src/app/reader/components/settings/FontDropDown.tsx  | 9 ++-------
 .../src/app/reader/components/settings/FontPanel.tsx     | 2 +-
 .../src/app/reader/components/settings/LayoutPanel.tsx   | 2 +-
 4 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/apps/readest-app/src/app/reader/components/settings/ColorPanel.tsx b/apps/readest-app/src/app/reader/components/settings/ColorPanel.tsx
index de0414d7..c64804bd 100644
--- a/apps/readest-app/src/app/reader/components/settings/ColorPanel.tsx
+++ b/apps/readest-app/src/app/reader/components/settings/ColorPanel.tsx
@@ -187,7 +187,7 @@ const ColorPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterReset
           </div>
 
           <div className='flex items-center justify-between'>
-            <h2 className=''>{_('Override Book Color')}</h2>
+            <h2 className='font-medium'>{_('Override Book Color')}</h2>
             <input
               type='checkbox'
               className='toggle'
diff --git a/apps/readest-app/src/app/reader/components/settings/FontDropDown.tsx b/apps/readest-app/src/app/reader/components/settings/FontDropDown.tsx
index 2781479e..731c330e 100644
--- a/apps/readest-app/src/app/reader/components/settings/FontDropDown.tsx
+++ b/apps/readest-app/src/app/reader/components/settings/FontDropDown.tsx
@@ -34,12 +34,7 @@ const FontItem: React.FC<FontItemProps> = ({ index, style, data }) => {
   const option = options[index]!;
 
   return (
-    <li
-      className='px-1 sm:px-2'
-      key={option.option}
-      style={style}
-      onClick={() => onSelect(option.option)}
-    >
+    <li className='px-2' key={option.option} style={style} onClick={() => onSelect(option.option)}>
       <div className='flex w-full items-center overflow-hidden !px-0 text-sm'>
         <span style={{ minWidth: `${iconSize16}px` }}>
           {selected === option.option && (
@@ -138,7 +133,7 @@ const FontDropdown: React.FC<DropdownProps> = ({
 
         {/* More options with nested dropdown */}
         {moreOptions && moreOptions.length > 0 && (
-          <li className='dropdown dropdown-left dropdown-top px-1 sm:px-2'>
+          <li className='dropdown dropdown-left dropdown-top px-2'>
             <div className='flex items-center px-0 text-sm'>
               <span style={{ minWidth: `${iconSize}px` }}>
                 <FiChevronLeft size={iconSize} />
diff --git a/apps/readest-app/src/app/reader/components/settings/FontPanel.tsx b/apps/readest-app/src/app/reader/components/settings/FontPanel.tsx
index ed7dd261..607c1ed0 100644
--- a/apps/readest-app/src/app/reader/components/settings/FontPanel.tsx
+++ b/apps/readest-app/src/app/reader/components/settings/FontPanel.tsx
@@ -250,7 +250,7 @@ const FontPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterReset
   return (
     <div className='my-4 w-full space-y-6'>
       <div className='flex items-center justify-between'>
-        <h2 className=''>{_('Override Book Font')}</h2>
+        <h2 className='font-medium'>{_('Override Book Font')}</h2>
         <input
           type='checkbox'
           className='toggle'
diff --git a/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx b/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx
index fc364dc3..a1da2ff2 100644
--- a/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx
+++ b/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx
@@ -370,7 +370,7 @@ const LayoutPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRese
   return (
     <div className='my-4 w-full space-y-6'>
       <div className='flex items-center justify-between'>
-        <h2 className=''>{_('Override Book Layout')}</h2>
+        <h2 className='font-medium'>{_('Override Book Layout')}</h2>
         <input
           type='checkbox'
           className='toggle'