Layout tweaks on mobile browsers (#219)

apps/readest-app/src/app/reader/components/FooterBar.tsx

@@ -60,7 +60,7 @@ const FooterBar: React.FC<FooterBarProps> = ({ bookKey, pageinfo, isHoveredAnim
   return (
     <div
       className={clsx(
-        'footer-bar absolute bottom-0 z-10 flex h-12 w-full items-center px-4',
+        'footer-bar absolute bottom-0 z-10 flex h-12 w-full items-center gap-x-4 px-4',
         'shadow-xs bg-base-100 transition-opacity duration-300',
         isTauriAppPlatform() && 'rounded-window-bottom-right',
         !isSideBarVisible && isTauriAppPlatform() && 'rounded-window-bottom-left',
@@ -70,7 +70,9 @@ const FooterBar: React.FC<FooterBarProps> = ({ bookKey, pageinfo, isHoveredAnim
       onMouseEnter={() => setHoveredBookKey(bookKey)}
       onMouseLeave={() => setHoveredBookKey('')}
     >
-      <Button icon={<RiArrowLeftWideLine />} onClick={handleGoPrev} tooltip={_('Go Left')} />
+      <div className='hidden sm:flex'>
+        <Button icon={<RiArrowLeftWideLine />} onClick={handleGoPrev} tooltip={_('Go Left')} />
+      </div>
       <Button
         icon={<RiArrowGoBackLine />}
         onClick={handleGoBack}
@@ -95,7 +97,9 @@ const FooterBar: React.FC<FooterBarProps> = ({ bookKey, pageinfo, isHoveredAnim
         onChange={(e) => handleProgressChange(e)}
       />
       <Button icon={<FaHeadphones />} onClick={handleSpeakText} tooltip={_('Speak')} />
-      <Button icon={<RiArrowRightWideLine />} onClick={handleGoNext} tooltip={_('Go Right')} />
+      <div className='hidden sm:flex'>
+        <Button icon={<RiArrowRightWideLine />} onClick={handleGoNext} tooltip={_('Go Right')} />
+      </div>
     </div>
   );
 };

apps/readest-app/src/app/reader/components/HeaderBar.tsx

@@ -6,6 +6,7 @@ import { useEnv } from '@/context/EnvContext';
 import { useReaderStore } from '@/store/readerStore';
 import { useSidebarStore } from '@/store/sidebarStore';
 import { isTauriAppPlatform } from '@/services/environment';
+import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 import useTrafficLight from '@/hooks/useTrafficLight';
 import WindowButtons from '@/components/WindowButtons';
 import Dropdown from '@/components/Dropdown';
@@ -38,6 +39,7 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const { hoveredBookKey, setHoveredBookKey, bookKeys } = useReaderStore();
   const { isSideBarVisible } = useSidebarStore();
+  const iconSize16 = useResponsiveSize(16);
 
   const handleToggleDropdown = (isOpen: boolean) => {
     setIsDropdownOpen(isOpen);
@@ -60,7 +62,7 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
       onMouseEnter={() => setHoveredBookKey(bookKey)}
       onMouseLeave={() => setHoveredBookKey('')}
     >
-      <div className='sidebar-bookmark-toggler bg-base-100 z-20 flex h-full items-center space-x-2 sm:space-x-4'>
+      <div className='sidebar-bookmark-toggler bg-base-100 z-20 flex h-full items-center space-x-4'>
         <SidebarToggler bookKey={bookKey} />
         <BookmarkToggler bookKey={bookKey} />
       </div>
@@ -69,13 +71,13 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
         <h2 className='line-clamp-1 max-w-[50%] text-center text-xs font-semibold'>{bookTitle}</h2>
       </div>
 
-      <div className='bg-base-100 z-20 ml-auto flex h-full items-center space-x-2 sm:space-x-4'>
+      <div className='bg-base-100 z-20 ml-auto flex h-full items-center space-x-4'>
         <SettingsToggler />
         <NotebookToggler bookKey={bookKey} />
         <Dropdown
           className='exclude-title-bar-mousedown dropdown-bottom dropdown-end'
           buttonClassName='btn btn-ghost h-8 min-h-8 w-8 p-0'
-          toggleButton={<PiDotsThreeVerticalBold />}
+          toggleButton={<PiDotsThreeVerticalBold size={iconSize16} />}
           onToggle={handleToggleDropdown}
         >
           <ViewMenu bookKey={bookKey} onSetSettingsDialogOpen={onSetSettingsDialogOpen} />

apps/readest-app/src/app/reader/components/NotebookToggler.tsx

@@ -4,6 +4,7 @@ import { LuNotebookPen } from 'react-icons/lu';
 import { useSidebarStore } from '@/store/sidebarStore';
 import { useNotebookStore } from '@/store/notebookStore';
 import { useTranslation } from '@/hooks/useTranslation';
+import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 import Button from '@/components/Button';
 
 interface NotebookTogglerProps {
@@ -14,6 +15,8 @@ const NotebookToggler: React.FC<NotebookTogglerProps> = ({ bookKey }) => {
   const _ = useTranslation();
   const { sideBarBookKey, setSideBarBookKey } = useSidebarStore();
   const { isNotebookVisible, toggleNotebook } = useNotebookStore();
+  const iconSize16 = useResponsiveSize(16);
+
   const handleToggleSidebar = () => {
     if (sideBarBookKey === bookKey) {
       toggleNotebook();
@@ -26,9 +29,9 @@ const NotebookToggler: React.FC<NotebookTogglerProps> = ({ bookKey }) => {
     <Button
       icon={
         sideBarBookKey == bookKey && isNotebookVisible ? (
-          <LuNotebookPen className='text-base-content' />
+          <LuNotebookPen size={iconSize16} className='text-base-content' />
         ) : (
-          <LuNotebookPen className='text-base-content' />
+          <LuNotebookPen size={iconSize16} className='text-base-content' />
         )
       }
       onClick={handleToggleSidebar}

apps/readest-app/src/app/reader/components/notebook/Header.tsx

@@ -5,6 +5,7 @@ import { FiSearch } from 'react-icons/fi';
 import { LuNotebookPen } from 'react-icons/lu';
 import { MdArrowBackIosNew, MdOutlinePushPin, MdPushPin } from 'react-icons/md';
 import { useTranslation } from '@/hooks/useTranslation';
+import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 
 const NotebookHeader: React.FC<{
   isPinned: boolean;
@@ -12,6 +13,7 @@ const NotebookHeader: React.FC<{
   handleTogglePin: () => void;
 }> = ({ isPinned, handleClose, handleTogglePin }) => {
   const _ = useTranslation();
+  const iconSize14 = useResponsiveSize(14);
   return (
     <div className='notebook-header relative flex h-11 items-center px-3'>
       <div className='absolute inset-0 flex items-center justify-center space-x-2'>
@@ -26,7 +28,7 @@ const NotebookHeader: React.FC<{
             isPinned ? 'bg-base-300' : 'bg-base-300/65',
           )}
         >
-          {isPinned ? <MdPushPin /> : <MdOutlinePushPin />}
+          {isPinned ? <MdPushPin size={iconSize14} /> : <MdOutlinePushPin size={iconSize14} />}
         </button>
         <button
           onClick={handleClose}

apps/readest-app/src/app/reader/components/sidebar/Header.tsx

@@ -21,6 +21,7 @@ const SidebarHeader: React.FC<{
   const { isTrafficLightVisible } = useTrafficLight();
   const iconSize14 = useResponsiveSize(14);
   const iconSize18 = useResponsiveSize(18);
+  const iconSize22 = useResponsiveSize(22);
   return (
     <div
       className={clsx(
@@ -33,7 +34,7 @@ const SidebarHeader: React.FC<{
           onClick={onClose}
           className={'btn btn-ghost btn-circle flex h-6 min-h-6 w-6 hover:bg-transparent sm:hidden'}
         >
-          <MdArrowBackIosNew />
+          <MdArrowBackIosNew size={iconSize22} />
         </button>
         <button className='btn btn-ghost h-8 min-h-8 w-8 p-0' onClick={onGoToLibrary}>
           <GiBookshelf className='fill-base-content' />