From cfe2b80a5d566cfa3d63b65686942a7f333118ea Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Tue, 1 Sep 2026 19:00:14 +0200
Subject: [PATCH] fix(collections): mobile map fills the viewport like trip and
 journal maps

---
 .../screens/collections/MCollections.tsx      | 13 +++++++++----
 .../mobile/collections/MCollections.test.tsx  | 19 +++++++++++++++++++
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/client/src/mobile/screens/collections/MCollections.tsx b/client/src/mobile/screens/collections/MCollections.tsx
index 90a3a3044..dc4c115e3 100644
--- a/client/src/mobile/screens/collections/MCollections.tsx
+++ b/client/src/mobile/screens/collections/MCollections.tsx
@@ -139,9 +139,14 @@ export default function MCollections() {
     `flex flex-none items-center gap-[5px] rounded-full border border-[color:var(--m-rowbr)] bg-m-sheetop px-3 py-2 text-[0.75rem] font-semibold text-m-ink ${disabled ? 'opacity-40' : ''}`
 
   return (
-    <div className="px-4 pb-[calc(var(--bottom-nav-h,84px)+12px)] pt-[var(--m-safe-top,12px)]">
+    <div
+      // Map view fills the viewport like the trip and journal maps do (#2104);
+      // h-dvh because the shell owns no scroll container (#1809). List view
+      // keeps the document as the scroller.
+      className={`px-4 pb-[calc(var(--bottom-nav-h,84px)+12px)] pt-[var(--m-safe-top,12px)] ${c.view === 'map' ? 'flex h-dvh flex-col overflow-hidden' : ''}`}
+    >
       {/* Header: back · list switcher · edit · share */}
-      <div className="mb-3 flex items-center gap-2 pt-2">
+      <div className="mb-3 flex flex-none items-center gap-2 pt-2">
         <button
           type="button"
           onClick={() => setDrop(v => !v)}
@@ -218,7 +223,7 @@ export default function MCollections() {
       ) : (
         <>
           {/* Toolbar: view toggle · search · filter chips / select actions */}
-          <div className="mt-3 rounded-[18px] border border-[color:var(--m-gbr)] bg-[color:var(--m-glass)] p-[10px]">
+          <div className="mt-3 flex-none rounded-[18px] border border-[color:var(--m-gbr)] bg-[color:var(--m-glass)] p-[10px]">
             <div className="flex items-center gap-2">
               <span className="flex flex-none rounded-xl bg-[color:var(--m-ic)] p-[3px]">
                 <button
@@ -435,7 +440,7 @@ export default function MCollections() {
             c.mappable.length === 0 ? (
               <EmptyNote icon={<MapIcon size={19} strokeWidth={1.8} />} title={t('collections.empty.noMatchTitle')} />
             ) : (
-              <div className="relative mt-3 h-[440px] overflow-hidden rounded-[20px] border border-[color:var(--m-rowbr)]">
+              <div className="relative mt-3 min-h-0 flex-1 overflow-hidden rounded-[20px] border border-[color:var(--m-rowbr)]">
                 <CollectionMap
                   places={c.mappable}
                   selectedPlaceId={c.selectedPlaceId}
diff --git a/client/tests/unit/mobile/collections/MCollections.test.tsx b/client/tests/unit/mobile/collections/MCollections.test.tsx
index c1dd64903..a103da0e5 100644
--- a/client/tests/unit/mobile/collections/MCollections.test.tsx
+++ b/client/tests/unit/mobile/collections/MCollections.test.tsx
@@ -471,6 +471,25 @@ describe('MCollections', () => {
     expect(fn('setSelectedPlaceId')).toHaveBeenCalledWith(null)
   })
 
+  it('FE-MOB-COLSCR-019b: the map fills the viewport instead of a fixed-height card (#2104)', () => {
+    mocks.coll = makeHook({ view: 'map', dark: true })
+    const { container } = render(<MCollections />)
+
+    // Root becomes a viewport-high flex column in map view, like the trip and
+    // journal maps; the card grows with flex-1 rather than pinning 440px.
+    expect(container.firstElementChild!.className).toContain('h-dvh')
+    const card = screen.getByTestId('map').parentElement!
+    expect(card.className).toContain('flex-1')
+    expect(card.className).not.toMatch(/h-\[\d+px\]/)
+  })
+
+  it('FE-MOB-COLSCR-019c: the list view keeps the document as the scroller', () => {
+    mocks.coll = makeHook({ view: 'list' })
+    const { container } = render(<MCollections />)
+
+    expect(container.firstElementChild!.className).not.toContain('h-dvh')
+  })
+
   it('FE-MOB-COLSCR-020: a map view with nothing mappable falls back to the empty note', () => {
     mocks.coll = makeHook({ view: 'map', mappable: [] })
     render(<MCollections />)