Add player spacer

ui/src/components/Drawer.tsx

@@ -8,7 +8,7 @@ import {
 } from "@mui/material";
 import { ReactNode, useState } from "react";
 
-import { BottomNavSpacer } from "@/components/BottomNav";
+import { PlayerSpacer } from "@/components/Player";
 import useIsMobile from "@/hooks/useIsMobile";
 import { displayDesktop, displayMobile } from "@/styles/responsive";
 
@@ -79,7 +79,7 @@ function Mobile({ children, open, onOpen, onClose }: DrawerProps) {
  <Box sx={{ overflow: "auto" }}>
  <ToolbarSpacer />
  {children}
- <BottomNavSpacer />
+ <PlayerSpacer />
  </Box>
  </SwipeableDrawer>
  );

ui/src/components/Player/Player.tsx

@@ -1,4 +1,5 @@
 import { Box } from "@mui/material";
+import { styled } from "@mui/material/styles";
 import dynamic from "next/dynamic";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
@@ -109,7 +110,7 @@ export default function Player({
  return (
  <Box
  sx={{
- minHeight: 80,
+ minHeight: (theme) => theme.spacing(10),
  color: "base.contrastText",
  backgroundColor: "base.main",
  display: "flex",
@@ -171,3 +172,9 @@ export default function Player({
  </Box>
  );
 }
+
+// Utility component to help with spacing
+// Just a box that's the same height as the player
+export const PlayerSpacer = styled(Box)(({ theme }) => ({
+ height: theme.spacing(10),
+}));

ui/src/components/Player/index.tsx

@@ -1 +1,2 @@
 export { default } from "./Player";
+export * from "./Player";