fix(layout): responsive layout for the custom highlight colors options (#2303)

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%]',
           )}
         >

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}

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

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 =