Merge pull request #8331 from thornbill/mobile-library

Fix library layout issues on mobile

src/apps/modern/features/libraries/components/AlphabetPicker.tsx

@@ -41,12 +41,18 @@ const AlphabetPicker: React.FC<AlphabetPickerProps> = ({
             // eslint-disable-next-line react/jsx-no-bind
             sx={theme => ({
                 position: 'fixed',
-                top: '112px', // This is the height of the AppBar + Tabs, this should be dynamic
+                top: {
+                    xs: '144px', // Extra small screens the AppBar wraps to 3 rows (128px) and we align top with 16px of spacing
+                    sm: '96px' // Small screens the AppBar is 2 rows (96px) and we align center (no extra spacing)
+                },
                 bottom: 0,
                 fontSize: '80%',
                 display: 'flex',
-                alignItems: 'center',
-                // This should render under the main AppBar but above the ItemsView AppBar
+                alignItems: {
+                    xs: 'start',
+                    sm: 'center'
+                },
+                // This should render under the main AppBar if overlapping
                 zIndex: theme.zIndex.appBar - 1
             })}
         >
@@ -64,8 +70,14 @@ const AlphabetPicker: React.FC<AlphabetPickerProps> = ({
                         value={l}
                         sx={{
                             borderWidth: 0,
-                            paddingTop: 0.25,
-                            paddingBottom: 0.25,
+                            paddingTop: {
+                                xs: 0,
+                                md: 0.25
+                            },
+                            paddingBottom: {
+                                xs: 0,
+                                md: 0.25
+                            },
                             paddingLeft: 0.5,
                             paddingRight: 0.5
                         }}

src/apps/modern/features/libraries/components/ItemsView.tsx

@@ -20,6 +20,7 @@ import { LibraryTab } from 'types/libraryTab';
 import type { ListOptions } from 'types/listOptions';
 
 import AlphabetPicker from './AlphabetPicker';
+import useMediaQuery from '@mui/material/useMediaQuery';
 
 const ItemsView: FC = () => {
     const {
@@ -35,6 +36,14 @@ const ItemsView: FC = () => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const setLibraryViewSettings = setViewSettings ?? ((action: SetStateAction<LibraryViewSettings>) => { /* no-op */ });
     const { isAlphabetPickerEnabled, noItemsMessage } = content ?? {};
+    // Check if the alphabet picker will fit in the current viewport
+    const isAlphabetPickerSupported = useMediaQuery(t => [
+        // Extra small screens have no padding around letters but larger AppBar
+        `${t.breakpoints.down('sm')} and (min-height: 575px)`,
+        // Small screens have padding around letters but smaller AppBar
+        // NOTE: Helper methods down/up add "@media" to the query string so use the value directly
+        `(min-width: ${t.breakpoints.values.sm}px) and (min-height: 610px)`
+    ].join(', '));
 
     const { __legacyApiClient__, user } = useApi();
 
@@ -182,7 +191,7 @@ const ItemsView: FC = () => {
 
     return (
         <Box className='padded-bottom-page'>
-            {isAlphabetPickerEnabled && hasSortName && (
+            {isAlphabetPickerSupported && isAlphabetPickerEnabled && hasSortName && (
                 <AlphabetPicker
                     libraryViewSettings={libraryViewSettings}
                     setLibraryViewSettings={setLibraryViewSettings}

src/apps/modern/features/libraries/components/LibraryToolbar.tsx

@@ -95,6 +95,7 @@ const LibraryToolbar: FC = () => {
 
     return (
         <Toolbar
+            variant='dense'
             className='padded-left padded-right'
             sx={{
                 display: 'flex',
@@ -153,6 +154,7 @@ const LibraryToolbar: FC = () => {
                     >
                         <ButtonGroup
                             variant='contained'
+                            size={isSmallScreen ? undefined : 'small'}
                         >
                             {isBtnPlayAllEnabled && (
                                 <PlayAllButton
@@ -199,6 +201,7 @@ const LibraryToolbar: FC = () => {
                     <ButtonGroup
                         color='inherit'
                         variant='text'
+                        size={isSmallScreen ? undefined : 'small'}
                     >
                         {isBtnFilterEnabled && (
                             <FilterButton

src/apps/modern/features/libraries/components/NewCollectionButton.tsx

@@ -38,6 +38,7 @@ const NewCollectionButton: FC<NewCollectionButtonProps> = ({
     return (
         <Button
             variant='contained'
+            size={isTextVisible ? undefined : 'small'}
             startIcon={isTextVisible ? <Add /> : undefined}
             onClick={showCollectionEditor}
         >

src/apps/modern/features/libraries/components/NewPlaylistButton.tsx

@@ -38,6 +38,7 @@ const NewPlaylistButton: FC<NewPlaylistButtonProps> = ({
     return (
         <Button
             variant='contained'
+            size={isTextVisible ? undefined : 'small'}
             startIcon={isTextVisible ? <PlaylistAdd /> : undefined}
             onClick={showPlaylistEditor}
         >

src/apps/modern/features/libraries/components/Pagination.tsx

@@ -3,6 +3,7 @@ import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
 import NavigateNextIcon from '@mui/icons-material/NavigateNext';
 import Button from '@mui/material/Button';
 import ButtonGroup from '@mui/material/ButtonGroup';
+import useMediaQuery from '@mui/material/useMediaQuery';
 
 import globalize from 'lib/globalize';
 import type { LibraryViewSettings } from 'types/library';
@@ -22,6 +23,8 @@ const Pagination: FC<PaginationProps> = ({
     total,
     disabled
 }) => {
+    const isSmallScreen = useMediaQuery(t => t.breakpoints.up('sm'));
+
     const onNextPageClick = useCallback(() => {
         setLibraryViewSettings((prevState) => ({
             ...prevState,
@@ -42,6 +45,7 @@ const Pagination: FC<PaginationProps> = ({
         <ButtonGroup
             color='inherit'
             variant='text'
+            size={isSmallScreen ? undefined : 'small'}
         >
             <Button
                 title={globalize.translate('Previous')}