From 33958a34043743b66451a0591b6c2fdb51aae939 Mon Sep 17 00:00:00 2001
From: Bill Thornton <thornbill@users.noreply.github.com>
Date: Wed, 5 Aug 2026 11:05:02 -0400
Subject: [PATCH 1/3] Use small library header buttons on small screens

---
 .../modern/features/libraries/components/LibraryToolbar.tsx   | 2 ++
 .../features/libraries/components/NewCollectionButton.tsx     | 1 +
 .../features/libraries/components/NewPlaylistButton.tsx       | 1 +
 src/apps/modern/features/libraries/components/Pagination.tsx  | 4 ++++
 4 files changed, 8 insertions(+)

diff --git a/src/apps/modern/features/libraries/components/LibraryToolbar.tsx b/src/apps/modern/features/libraries/components/LibraryToolbar.tsx
index f56149a999..8c96eb5f1c 100644
--- a/src/apps/modern/features/libraries/components/LibraryToolbar.tsx
+++ b/src/apps/modern/features/libraries/components/LibraryToolbar.tsx
@@ -153,6 +153,7 @@ const LibraryToolbar: FC = () => {
                     >
                         <ButtonGroup
                             variant='contained'
+                            size={isSmallScreen ? undefined : 'small'}
                         >
                             {isBtnPlayAllEnabled && (
                                 <PlayAllButton
@@ -199,6 +200,7 @@ const LibraryToolbar: FC = () => {
                     <ButtonGroup
                         color='inherit'
                         variant='text'
+                        size={isSmallScreen ? undefined : 'small'}
                     >
                         {isBtnFilterEnabled && (
                             <FilterButton
diff --git a/src/apps/modern/features/libraries/components/NewCollectionButton.tsx b/src/apps/modern/features/libraries/components/NewCollectionButton.tsx
index 6f414aa9e2..54aadbce65 100644
--- a/src/apps/modern/features/libraries/components/NewCollectionButton.tsx
+++ b/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}
         >
diff --git a/src/apps/modern/features/libraries/components/NewPlaylistButton.tsx b/src/apps/modern/features/libraries/components/NewPlaylistButton.tsx
index ec95f30554..ec89e28ab7 100644
--- a/src/apps/modern/features/libraries/components/NewPlaylistButton.tsx
+++ b/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}
         >
diff --git a/src/apps/modern/features/libraries/components/Pagination.tsx b/src/apps/modern/features/libraries/components/Pagination.tsx
index 62b0275359..d254022852 100644
--- a/src/apps/modern/features/libraries/components/Pagination.tsx
+++ b/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')}

From 606f78920e646fae18531b1798d5cb54ff82c879 Mon Sep 17 00:00:00 2001
From: Bill Thornton <thornbill@users.noreply.github.com>
Date: Wed, 5 Aug 2026 18:13:01 -0400
Subject: [PATCH 2/3] Use dense toolbar variant for libraries

---
 .../modern/features/libraries/components/AlphabetPicker.tsx  | 5 ++++-
 .../modern/features/libraries/components/LibraryToolbar.tsx  | 1 +
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/apps/modern/features/libraries/components/AlphabetPicker.tsx b/src/apps/modern/features/libraries/components/AlphabetPicker.tsx
index 254380b3c4..5980142c6e 100644
--- a/src/apps/modern/features/libraries/components/AlphabetPicker.tsx
+++ b/src/apps/modern/features/libraries/components/AlphabetPicker.tsx
@@ -41,7 +41,10 @@ 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',
diff --git a/src/apps/modern/features/libraries/components/LibraryToolbar.tsx b/src/apps/modern/features/libraries/components/LibraryToolbar.tsx
index 8c96eb5f1c..c6442fdeb4 100644
--- a/src/apps/modern/features/libraries/components/LibraryToolbar.tsx
+++ b/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',

From c39b5bfed9df1d96c9bb8fc2fa050b19f8c0f892 Mon Sep 17 00:00:00 2001
From: Bill Thornton <thornbill@users.noreply.github.com>
Date: Wed, 5 Aug 2026 18:14:01 -0400
Subject: [PATCH 3/3] Fix alphabet picket positioning on mobile

---
 .../libraries/components/AlphabetPicker.tsx     | 17 +++++++++++++----
 .../features/libraries/components/ItemsView.tsx | 11 ++++++++++-
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/apps/modern/features/libraries/components/AlphabetPicker.tsx b/src/apps/modern/features/libraries/components/AlphabetPicker.tsx
index 5980142c6e..9a8b23fe26 100644
--- a/src/apps/modern/features/libraries/components/AlphabetPicker.tsx
+++ b/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
                         }}
diff --git a/src/apps/modern/features/libraries/components/ItemsView.tsx b/src/apps/modern/features/libraries/components/ItemsView.tsx
index 629fb6281d..546fd4c903 100644
--- a/src/apps/modern/features/libraries/components/ItemsView.tsx
+++ b/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}