fix(layout): more responsive layout on smaller screens, closes #3029 (#3034)

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

@@ -161,7 +161,7 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
           }
         }}
       >
-        <div className='bg-base-100 sidebar-bookmark-toggler z-20 flex h-full items-center gap-x-4 pe-2'>
+        <div className='header-tools-start bg-base-100 sidebar-bookmark-toggler z-20 flex h-full items-center gap-x-4 pe-2 max-[350px]:gap-x-2'>
           <div className='hidden sm:flex'>
             <SidebarToggler bookKey={bookKey} />
           </div>
@@ -222,7 +222,7 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
           </div>
         </div>
 
-        <div className='bg-base-100 z-20 ml-auto flex h-full items-center space-x-4 ps-2'>
+        <div className='header-tools-end bg-base-100 z-20 ms-auto flex h-full items-center gap-x-4 ps-2 max-[350px]:gap-x-2'>
           <SettingsToggler bookKey={bookKey} />
           <NotebookToggler bookKey={bookKey} />
           <Dropdown

apps/readest-app/src/components/settings/SettingsDialog.tsx

@@ -168,7 +168,10 @@ const SettingsDialog: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       onClose={handleClose}
       className='modal-open'
       bgClassName={bookKey ? 'sm:!bg-black/20' : 'sm:!bg-black/50'}
-      boxClassName={clsx('sm:min-w-[520px]', appService?.isMobile && 'sm:max-w-[90%] sm:w-3/4')}
+      boxClassName={clsx(
+        'sm:min-w-[520px] overflow-hidden',
+        appService?.isMobile && 'sm:max-w-[90%] sm:w-3/4',
+      )}
       snapHeight={appService?.isMobile ? 0.7 : undefined}
       header={
         <div className='flex w-full flex-col items-center'>
@@ -190,7 +193,10 @@ const SettingsDialog: React.FC<{ bookKey: string }> = ({ bookKey }) => {
               ref={tabsRef}
               role='group'
               aria-label={_('Settings Panels') + ' - ' + (currentPanel?.label || '')}
-              className={clsx('dialog-tabs ms-1 flex h-10 w-full items-center gap-1 sm:ms-0')}
+              className={clsx(
+                'dialog-tabs ms-1 flex h-10 w-full items-center gap-1 overflow-x-auto sm:ms-0',
+              )}
+              style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
             >
               {tabConfig.map(({ tab, icon: Icon, label }) => (
                 <button
@@ -199,7 +205,7 @@ const SettingsDialog: React.FC<{ bookKey: string }> = ({ bookKey }) => {
                   tabIndex={0}
                   title={label}
                   className={clsx(
-                    'btn btn-ghost text-base-content btn-sm gap-1 px-2',
+                    'btn btn-ghost text-base-content btn-sm gap-1 px-2 max-[350px]:px-1',
                     activePanel === tab ? 'btn-active' : '',
                   )}
                   onClick={() => handleSetActivePanel(tab)}