From d7e89cc01fbea0162ed6d5e854889610e2bc9e42 Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Thu, 23 Oct 2025 17:51:31 +0800
Subject: [PATCH] fix(layout): responsive layout for the custom highlight
 colors options (#2303)

---
 apps/readest-app/src/app/library/components/GroupItem.tsx    | 4 ++--
 .../src/app/reader/components/footerbar/ColorPanel.tsx       | 5 -----
 .../src/app/reader/components/sidebar/Content.tsx            | 5 ++++-
 apps/readest-app/src/components/settings/ColorPanel.tsx      | 2 +-
 4 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/apps/readest-app/src/app/library/components/GroupItem.tsx b/apps/readest-app/src/app/library/components/GroupItem.tsx
index b2884a4b..fd0b645a 100644
--- a/apps/readest-app/src/app/library/components/GroupItem.tsx
+++ b/apps/readest-app/src/app/library/components/GroupItem.tsx
@@ -100,13 +100,13 @@ const GroupItem: React.FC<GroupItemProps> = ({ mode, group, isSelectMode, groupS
       <div
         className={clsx(
           'relative flex overflow-hidden',
-          mode === 'grid' && 'bg-base-100 aspect-[28/41] items-center justify-center p-2 shadow-md',
+          mode === 'grid' && 'bg-base-100 aspect-[28/41] items-center justify-center shadow-md',
           mode === 'list' && 'h-32 items-center justify-start gap-4 py-2',
         )}
       >
         <div
           className={clsx(
-            mode === 'grid' && 'flex h-full w-full',
+            mode === 'grid' && 'flex h-full w-full p-2',
             mode === 'list' && 'relative min-w-0 max-w-[85%]',
           )}
         >
diff --git a/apps/readest-app/src/app/reader/components/footerbar/ColorPanel.tsx b/apps/readest-app/src/app/reader/components/footerbar/ColorPanel.tsx
index 98fb0da9..33b9826b 100644
--- a/apps/readest-app/src/app/reader/components/footerbar/ColorPanel.tsx
+++ b/apps/readest-app/src/app/reader/components/footerbar/ColorPanel.tsx
@@ -101,11 +101,6 @@ export const ColorPanel: React.FC<ColorPanelProps> = ({ actionTab, bottomOffset
           className='flex gap-3 overflow-x-auto p-2'
           style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
         >
-          <style>{`
-            .theme-scroll::-webkit-scrollbar {
-              display: none;
-            }
-          `}</style>
           {themes.map(({ name, label, colors }) => (
             <button
               key={name}
diff --git a/apps/readest-app/src/app/reader/components/sidebar/Content.tsx b/apps/readest-app/src/app/reader/components/sidebar/Content.tsx
index 8923551b..e0ed1bdf 100644
--- a/apps/readest-app/src/app/reader/components/sidebar/Content.tsx
+++ b/apps/readest-app/src/app/reader/components/sidebar/Content.tsx
@@ -63,7 +63,10 @@ const SidebarContent: React.FC<{
       >
         <OverlayScrollbarsComponent
           className='min-h-0 flex-1'
-          options={{ scrollbars: { autoHide: 'scroll' }, showNativeOverlaidScrollbars: false }}
+          options={{
+            scrollbars: { autoHide: 'scroll', clickScroll: true },
+            showNativeOverlaidScrollbars: false,
+          }}
           defer
         >
           <div
diff --git a/apps/readest-app/src/components/settings/ColorPanel.tsx b/apps/readest-app/src/components/settings/ColorPanel.tsx
index 0a212938..25901593 100644
--- a/apps/readest-app/src/components/settings/ColorPanel.tsx
+++ b/apps/readest-app/src/components/settings/ColorPanel.tsx
@@ -444,7 +444,7 @@ const ColorPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterReset
           <div>
             <h2 className='mb-2 font-medium'>{_('Highlight Colors')}</h2>
             <div className='card border-base-200 bg-base-100 overflow-visible border p-4 shadow'>
-              <div className='flex items-center justify-around gap-2'>
+              <div className='grid grid-cols-3 gap-3 sm:grid-cols-5'>
                 {(['red', 'violet', 'blue', 'green', 'yellow'] as HighlightColor[]).map(
                   (color, index, array) => {
                     const position =