diff --git a/ui/src/components/BottomNav.tsx b/ui/src/components/BottomNav.tsx
index b4222bf4..42d6a656 100644
--- a/ui/src/components/BottomNav.tsx
+++ b/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",
diff --git a/ui/src/components/Drawer.tsx b/ui/src/components/Drawer.tsx
index c8ef44fe..f721d55b 100644
--- a/ui/src/components/Drawer.tsx
+++ b/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,
diff --git a/ui/src/components/Header.tsx b/ui/src/components/Header.tsx
index 0c7c79f5..a5519c85 100644
--- a/ui/src/components/Header.tsx
+++ b/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>
   );
diff --git a/ui/src/components/MapLayout.tsx b/ui/src/components/MapLayout.tsx
index e5b6a967..462a08c2 100644
--- a/ui/src/components/MapLayout.tsx
+++ b/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>
   );
 }
diff --git a/ui/src/components/Player/Player.tsx b/ui/src/components/Player/Player.tsx
index 10e6ac36..c0439986 100644
--- a/ui/src/components/Player/Player.tsx
+++ b/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),
+}));
diff --git a/ui/src/components/Player/index.tsx b/ui/src/components/Player/index.tsx
index 50e744d2..1fa0b603 100644
--- a/ui/src/components/Player/index.tsx
+++ b/ui/src/components/Player/index.tsx
@@ -1 +1,2 @@
 export { default } from "./Player";
+export * from "./Player";
diff --git a/ui/src/pages/[feed].tsx b/ui/src/pages/[feed].tsx
index 7edd36c3..58d6b0b0 100644
--- a/ui/src/pages/[feed].tsx
+++ b/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>
diff --git a/ui/src/pages/dynamic/[feed].tsx b/ui/src/pages/dynamic/[feed].tsx
index 0b440b67..04c6f69f 100644
--- a/ui/src/pages/dynamic/[feed].tsx
+++ b/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>
diff --git a/ui/src/styles/responsive.ts b/ui/src/styles/responsive.ts
index 8aa6314a..5c87a0ba 100644
--- a/ui/src/styles/responsive.ts
+++ b/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");
diff --git a/ui/src/styles/theme.ts b/ui/src/styles/theme.ts
index f7c1e529..364bb48e 100644
--- a/ui/src/styles/theme.ts
+++ b/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",