Fix mobile drawer layout

ui/src/components/BottomNav.tsx

@@ -7,11 +7,11 @@ import {
 } from "@mui/material";
 import { styled } from "@mui/material/styles";
 
-import { displayMobile } from "@/styles/responsive";
+import { displayMobileOnly } from "@/styles/responsive";
 
 export default function BottomNav() {
  return (
- <Box sx={displayMobile}>
+ <Box sx={displayMobileOnly}>
  <Paper
  sx={{
  position: "fixed",

ui/src/components/Drawer.tsx

@@ -8,9 +8,9 @@ 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";
+import { displayDesktopOnly, displayMobileOnly } from "@/styles/responsive";
 
 export default function Drawer({
  children,
@@ -63,23 +63,22 @@ function Mobile({ children, open, onOpen, onClose }: DrawerProps) {
  swipeAreaWidth={100}
  disableSwipeToOpen={false}
  SwipeAreaProps={{
- sx: { ...displayMobile },
+ sx: displayMobileOnly,
  }}
  ModalProps={{
  keepMounted: true,
  }}
  sx={{
- ...displayMobile,
+ ...displayMobileOnly,
  "& > .MuiPaper-root": {
  height: 1,
- overflow: "visible",
  },
  }}
  >
  <Box sx={{ overflow: "auto" }}>
  <ToolbarSpacer />
  {children}
- <BottomNavSpacer />
+ <PlayerSpacer />
  </Box>
  </SwipeableDrawer>
  );
@@ -95,7 +94,7 @@ function Desktop({ children, open, onOpen, onClose }: DrawerProps) {
  if (!open) onOpen();
  }}
  sx={(theme) => ({
- ...displayDesktop,
+ ...displayDesktopOnly,
  width: theme.breakpoints.values.sm,
  maxWidth: 0.5,
  flexShrink: 0,

ui/src/components/Header.tsx

@@ -3,7 +3,7 @@ import { AppBar, Box, IconButton, Toolbar, Typography } from "@mui/material";
 import { useState } from "react";
 
 import Link from "@/components/Link";
-import { displayDesktop, displayMobile } from "@/styles/responsive";
+import { displayDesktopOnly, displayMobileOnly } from "@/styles/responsive";
 
 export default function Header() {
  return (
@@ -30,7 +30,7 @@ function Mobile() {
  };
 
  return (
- <Box sx={displayMobile}>
+ <Box sx={displayMobileOnly}>
  <Box
  sx={{
  flexGrow: 1,
@@ -55,7 +55,7 @@ function Mobile() {
 
 function Desktop() {
  return (
- <Box sx={displayDesktop}>
+ <Box sx={displayDesktopOnly}>
  <Brand />
  </Box>
  );

ui/src/components/MapLayout.tsx

@@ -5,11 +5,11 @@ import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
 import { ReactElement, ReactNode, useEffect, useState } from "react";
 
-import BottomNav from "@/components/BottomNav";
 import Drawer from "@/components/Drawer";
 import Header from "@/components/Header";
-import Player from "@/components/Player";
+import Player, { PlayerSpacer } from "@/components/Player";
 import { useFeedQuery, useFeedsQuery } from "@/graphql/generated";
+import { displayMobileOnly } from "@/styles/responsive";
 
 const MapWithNoSSR = dynamic(() => import("./Map"), {
  ssr: false,
@@ -59,7 +59,19 @@ function MapLayout({ children }: { children: ReactNode }) {
  };
 
  return (
- <Box sx={{ height: "100%", display: "flex", flexDirection: "column" }}>
+ <Box
+ sx={{
+ // use `dvh` for dynamic viewport height to handle mobile browser weirdness
+ // but fallback to `vh` for browsers that don't support `dvh`
+ // `&` is a workaround because sx prop can't have identical keys
+ "&": {
+ height: "100dvh",
+ },
+ height: "100vh",
+ display: "flex",
+ flexDirection: "column",
+ }}
+ >
  <Header />
  <Box sx={{ flexGrow: 1, display: "flex" }}>
  <Drawer onClose={invalidateSize} onOpen={invalidateSize}>
@@ -70,6 +82,7 @@ function MapLayout({ children }: { children: ReactNode }) {
  flexGrow: 1,
  display: "flex",
  flexDirection: "column",
+ minWidth: 0,
  }}
  >
  <Box sx={{ flexGrow: 1 }}>
@@ -79,10 +92,10 @@ function MapLayout({ children }: { children: ReactNode }) {
  feeds={feeds}
  />
  </Box>
+ <PlayerSpacer sx={displayMobileOnly} />
  <Player currentFeed={currentFeed} />
  </Box>
  </Box>
- <BottomNav />
  </Box>
  );
 }

ui/src/components/Player/Player.tsx

@@ -1,10 +1,12 @@
 import { Box } from "@mui/material";
+import { styled } from "@mui/material/styles";
 import dynamic from "next/dynamic";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import type { Feed } from "@/graphql/generated";
 import useFeedPresence from "@/hooks/useFeedPresence";
 import useTimestampFetcher from "@/hooks/useTimestampFetcher";
+import { mobileOnly } from "@/styles/responsive";
 
 import DetectionButton from "./DetectionButton";
 import DetectionDialog from "./DetectionDialog";
@@ -108,16 +110,24 @@ export default function Player({
 
  return (
  <Box
- sx={{
- minHeight: 80,
+ sx={(theme) => ({
+ minHeight: theme.spacing(10),
  color: "base.contrastText",
  backgroundColor: "base.main",
- mb: [8, 0],
  display: "flex",
  alignItems: "center",
  justifyContent: "space-between",
+ px: [0, 2],
  position: "relative",
- }}
+ [mobileOnly(theme)]: {
+ position: "fixed",
+ bottom: 0,
+ left: 0,
+ right: 0,
+ },
+ // Keep player above the sliding drawer
+ zIndex: theme.zIndex.drawer + 1,
+ })}
  >
  <Box display="none">
  <VideoJS options={playerOptions} onReady={handleReady} />
@@ -135,22 +145,44 @@ export default function Player({
  <DetectionButton />
  </DetectionDialog>
  )}
- <Box mx={2}>
+ <Box mx={1}>
  <PlayPauseButton
  playerStatus={playerStatus}
  onClick={handlePlayPauseClick}
  disabled={!currentFeed}
  />
  </Box>
- <Box mx={2}>{currentFeed && <ListenerCount count={listenerCount} />}</Box>
- <Box mx={2}>
+ <Box mx={1}>{currentFeed && <ListenerCount count={listenerCount} />}</Box>
+ <Box
+ sx={{
+ mx: 1,
+ whiteSpace: "nowrap",
+ textOverflow: "ellipsis",
+ overflow: "hidden",
+ }}
+ >
  {currentFeed
  ? `${currentFeed.name} - ${currentFeed.nodeName}`
  : "Select a location to start listening live"}
  </Box>
- <Box sx={{ mx: 4, flexGrow: 1, textAlign: "end" }}>
+ <Box
+ sx={{
+ mx: 1,
+ flexGrow: 1,
+ textAlign: "end",
+ whiteSpace: "nowrap",
+ textOverflow: "ellipsis",
+ overflow: "hidden",
+ }}
+ >
  {currentFeed && `${currentFeed.latLng.lat}, ${currentFeed.latLng.lng}`}
  </Box>
  </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";

ui/src/pages/[feed].tsx

@@ -26,7 +26,11 @@ const FeedPage: NextPageWithLayout = () => {
  <main>
  <Container maxWidth="sm">
  <Box>
- <Breadcrumbs separator={<NavigateNext />} aria-label="breadcrumb">
+ <Breadcrumbs
+ separator={<NavigateNext />}
+ aria-label="breadcrumb"
+ sx={{ mt: 2 }}
+ >
  <Link href={"/"} color="inherit">
  All hydrophones
  </Link>

ui/src/pages/dynamic/[feed].tsx

@@ -22,7 +22,11 @@ const FeedPage: NextPageWithLayout = () => {
  <main>
  <Container maxWidth="sm">
  <Box>
- <Breadcrumbs separator={<NavigateNext />} aria-label="breadcrumb">
+ <Breadcrumbs
+ separator={<NavigateNext />}
+ aria-label="breadcrumb"
+ sx={{ mt: 2 }}
+ >
  <Link href={"/"} color="inherit">
  All hydrophones
  </Link>

ui/src/styles/responsive.ts

@@ -1,2 +1,7 @@
-export const displayMobile = { display: { xs: "block", sm: "none" } };
-export const displayDesktop = { display: { xs: "none", sm: "block" } };
+import { Theme } from "@mui/material";
+
+export const displayMobileOnly = { display: { xs: "block", sm: "none" } };
+export const displayDesktopOnly = { display: { xs: "none", sm: "block" } };
+
+export const mobileOnly = (theme: Theme) => theme.breakpoints.down("sm");
+export const desktopOnly = (theme: Theme) => theme.breakpoints.up("sm");

ui/src/styles/theme.ts

@@ -95,13 +95,6 @@ const theme = createTheme({
 
 theme.components = {
  ...theme.components,
- MuiCssBaseline: {
- styleOverrides: `
- html, body, #__next {
- height: 100%;
- }
- `,
- },
  MuiAppBar: {
  defaultProps: {
  color: "base",