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

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