Make library tabs menu position fixed (#369)

src/screens/Library.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Chip, Tab, Tabs, styled } from '@mui/material';
+import { Chip, Tab, Tabs, styled, Box } from '@mui/material';
 import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { useQueryParam, NumberParam } from 'use-query-params';
 import { useTranslation } from 'react-i18next';
@@ -21,6 +21,34 @@ import AppbarSearch from '@/components/util/AppbarSearch';
 import UpdateChecker from '@/components/library/UpdateChecker';
 import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
 
+const StyledGridWrapper = styled(Box)(({ theme }) => ({
+    // TabsMenu height + TabsMenu bottom padding - grid item top padding
+    marginTop: `calc(48px + 13px - 8px)`,
+    // header height - TabsMenu height - TabsMenu bottom padding + grid item top padding
+    minHeight: 'calc(100vh - 64px - 48px - 13px + 8px)',
+    position: 'relative',
+    [theme.breakpoints.down('sm')]: {
+        // TabsMenu - 8px margin diff header height (56px) + TabsMenu bottom padding - grid item top padding
+        marginTop: `calc(48px - 8px + 13px - 8px)`,
+        // header height (+ 8px margin) - footer height - TabsMenu height
+        minHeight: 'calc(100vh - 64px - 64px - 48px)',
+    },
+}));
+
+const TabsMenu = styled(Tabs)(({ theme }) => ({
+    display: 'flex',
+    position: 'fixed',
+    top: '64px',
+    width: 'calc(100% - 64px)',
+    zIndex: 1,
+    backgroundColor: theme.palette.background.default,
+    paddingBottom: '13px',
+    [theme.breakpoints.down('sm')]: {
+        top: '56px', // header height
+        width: '100%',
+    },
+}));
+
 const TitleWithSizeTag = styled('span')({
     display: 'flex',
     alignItems: 'center',
@@ -108,8 +136,8 @@ export default function Library() {
     const scrollableTabs = window.innerWidth < tabs.length * 160;
 
     return (
-        <>
-            <Tabs
+        <StyledGridWrapper>
+            <TabsMenu
                 value={activeTab.order}
                 onChange={(e, newTab) => handleTabChange(newTab)}
                 indicatorColor="primary"
@@ -132,7 +160,7 @@ export default function Library() {
                         value={tab.order}
                     />
                 ))}
-            </Tabs>
+            </TabsMenu>
             {tabs.map((tab) => (
                 <TabPanel key={tab.order} index={tab.order} currentIndex={activeTab.order}>
                     {tab === activeTab &&
@@ -151,6 +179,6 @@ export default function Library() {
                         ))}
                 </TabPanel>
             ))}
-        </>
+        </StyledGridWrapper>
     );
 }