Fix the app shell on phones, and stop the button eating list content

Three bugs, two of them the same mistake in different places.

The shell was min-h-[100svh], so anything marginally too tall grew the
page and the whole document scrolled. On a phone that also collapses the
browser toolbar mid-scroll, which resizes the viewport and reflows
everything — the "window resizes and it's a mess". An app shell should
be exactly the viewport and never scroll; the panes inside it scroll.
Now h-[100svh] with overflow-hidden, plus the min-h-0 that flex children
need in order to actually shrink.

The map used h-full — a percentage height resolved against a flex-basis
parent, which is unreliable on mobile Safari. The container came out
zero-height and Google had nothing to render into, so the map simply
didn't appear. It's absolutely positioned against its already-relative
pane now, which is unambiguous.

And the floating "+ new date" button sat on top of the last card in any
scrolling list. Every pane it can float over now reserves space beneath
its content so the list scrolls clear of it.

Verified at 375: page height exactly 812, no overflow either axis, map
pane 649px tall, 44px clearance under the last card. At 1400: three
panes, no overflow, 70px clearance.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: Kjubikstronk

src/components/DateMap.tsx

@@ -127,7 +127,7 @@ function LiveMap(props: Props) {
         // pixel design, and landed on top of our locate button. Scroll and
         // pinch both still zoom.
         disableDefaultUI
-        className="h-full w-full"
+        className="absolute inset-0"
       >
         {placed.map((it) => (
           <AdvancedMarker
@@ -456,7 +456,7 @@ function MapFallback(props: Props) {
   }, [placed])
 
   return (
-    <div className="relative h-full w-full overflow-hidden bg-[var(--color-paper)]">
+    <div className="absolute inset-0 overflow-hidden bg-[var(--color-paper)]">
       <div
         aria-hidden="true"
         className="absolute inset-0 opacity-40"

src/components/Device.tsx

@@ -19,8 +19,8 @@ type Props = {
 
 export default function Device({ children, status }: Props) {
   return (
-    <div className="safe-frame flex min-h-[100svh] flex-col sm:p-6 lg:p-8">
-      <div className="device boot mx-auto flex w-full max-w-6xl flex-1 flex-col overflow-hidden">
+    <div className="safe-frame flex h-[100svh] flex-col overflow-hidden sm:p-6 lg:p-8">
+      <div className="device boot mx-auto flex w-full min-h-0 max-w-6xl flex-1 flex-col overflow-hidden">
         {/* Status bar — the printed legend across the top of the case. */}
         <header className="flex items-center justify-between gap-3 px-3 py-2 sm:px-4 sm:py-3">
           <div className="flex items-center gap-2">
@@ -33,7 +33,7 @@ export default function Device({ children, status }: Props) {
         </header>
 
         {/* The recessed display. */}
-        <div className="screen m-2 mt-0 flex flex-1 flex-col overflow-hidden sm:m-3 sm:mt-0">
+        <div className="screen m-2 mt-0 flex min-h-0 flex-1 flex-col overflow-hidden sm:m-3 sm:mt-0">
           {children}
         </div>
       </div>

src/screens/Home.tsx

@@ -126,7 +126,7 @@ export default function Home() {
   const dayEntries = selected ? (byDay.get(selected) ?? []) : []
 
   const calendarPane = (
-    <div className="flex min-h-0 flex-col overflow-y-auto">
+    <div className="flex min-h-0 flex-col overflow-y-auto pb-28">
       <Calendar
         month={month}
         onMonthChange={setMonth}
@@ -191,7 +191,7 @@ export default function Home() {
         {calendarPane}
       </div>
       {mapPane}
-      <div className="w-64 shrink-0 overflow-y-auto border-l-[3px] border-[var(--color-ink)]">
+      <div className="w-64 shrink-0 overflow-y-auto border-l-[3px] border-[var(--color-ink)] pb-28">
         {ideasPane}
       </div>
     </div>
@@ -203,7 +203,7 @@ export default function Home() {
         {view === 'calendar' && calendarPane}
         {view === 'map' && mapPane}
         {view === 'ideas' && (
-          <div className="min-h-0 flex-1 overflow-y-auto">{ideasPane}</div>
+          <div className="min-h-0 flex-1 overflow-y-auto pb-28">{ideasPane}</div>
         )}
       </div>
       <TabBar view={view} onChange={setView} />