Fix alphabet picket positioning on mobile

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

@@ -48,8 +48,11 @@ const AlphabetPicker: React.FC<AlphabetPickerProps> = ({
                 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
             })}
         >
@@ -67,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}