From 9cb5c6d18a5d693374fdbadb968190918f316dd4 Mon Sep 17 00:00:00 2001 From: luandro Date: Tue, 28 Jul 2026 09:04:30 -0300 Subject: [PATCH 1/2] feat(data): full-screen map view + shared MapScreenLayout component (#132) --- .../MapScreenLayout.stories.tsx | 90 ++++++++ .../MapScreenLayout/MapScreenLayout.tsx | 69 ++++++ .../shared/MapScreenLayout/index.ts | 2 + src/screens/DataScreen.tsx | 205 ++++++++++++------ src/stores/view-mode-store.ts | 2 +- tests/e2e/critical-flows.e2e.ts | 20 ++ .../MapScreenLayout/MapScreenLayout.test.tsx | 86 ++++++++ tests/unit/screens/DataScreen.test.tsx | 33 +++ 8 files changed, 443 insertions(+), 64 deletions(-) create mode 100644 src/components/shared/MapScreenLayout/MapScreenLayout.stories.tsx create mode 100644 src/components/shared/MapScreenLayout/MapScreenLayout.tsx create mode 100644 src/components/shared/MapScreenLayout/index.ts create mode 100644 tests/unit/components/shared/MapScreenLayout/MapScreenLayout.test.tsx diff --git a/src/components/shared/MapScreenLayout/MapScreenLayout.stories.tsx b/src/components/shared/MapScreenLayout/MapScreenLayout.stories.tsx new file mode 100644 index 00000000..40ee4cc7 --- /dev/null +++ b/src/components/shared/MapScreenLayout/MapScreenLayout.stories.tsx @@ -0,0 +1,90 @@ +import type { Meta, StoryObj } from '@storybook/tanstack-react'; + +import { MapScreenLayout } from '@/components/shared/MapScreenLayout/MapScreenLayout'; + +const meta: Meta = { + title: 'Components/MapScreenLayout', + component: MapScreenLayout, + parameters: { + layout: 'fullscreen', + }, + decorators: [ + (Story) => ( +
+ +
+ ), + ], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; + +export const WithTopRight: Story = { + args: { + topRight: ( + + ), + }, +}; + +export const WithBottomButtons: Story = { + args: { + bottomLeft: ( + + ), + bottomRight: ( + + ), + }, +}; + +export const WithSidebar: Story = { + args: { + sidebar: ( +
+

Sidebar

+

Desktop sidebar content

+
+ ), + }, +}; + +export const NonInteractive: Story = { + args: {}, +}; diff --git a/src/components/shared/MapScreenLayout/MapScreenLayout.tsx b/src/components/shared/MapScreenLayout/MapScreenLayout.tsx new file mode 100644 index 00000000..d3bbbd89 --- /dev/null +++ b/src/components/shared/MapScreenLayout/MapScreenLayout.tsx @@ -0,0 +1,69 @@ +import type { CSSProperties, ReactNode } from 'react'; + +import { useIsDesktop } from '@/hooks/useIsDesktop'; + +export interface MapScreenLayoutProps { + className?: string; + style?: CSSProperties; + sidebar?: ReactNode; + topLeft?: ReactNode; + topRight?: ReactNode; + bottomLeft?: ReactNode; + bottomRight?: ReactNode; + children?: ReactNode; +} + +export function MapScreenLayout({ + className, + style, + sidebar, + topLeft, + topRight, + bottomLeft, + bottomRight, + children, +}: MapScreenLayoutProps) { + const isDesktop = useIsDesktop(); + + return ( +
+
+ {children} + + {topLeft && ( +
+ {topLeft} +
+ )} + + {topRight && ( +
+ {topRight} +
+ )} + + {bottomLeft && ( +
+ {bottomLeft} +
+ )} + + {bottomRight && ( +
+ {bottomRight} +
+ )} +
+ + {/* eslint-disable-next-line eqeqeq -- intentional null/undefined check */} + {isDesktop && sidebar != null && ( + + )} +
+ ); +} diff --git a/src/components/shared/MapScreenLayout/index.ts b/src/components/shared/MapScreenLayout/index.ts new file mode 100644 index 00000000..c9809f5f --- /dev/null +++ b/src/components/shared/MapScreenLayout/index.ts @@ -0,0 +1,2 @@ +export { MapScreenLayout } from './MapScreenLayout'; +export type { MapScreenLayoutProps } from './MapScreenLayout'; diff --git a/src/screens/DataScreen.tsx b/src/screens/DataScreen.tsx index 34c09bcd..876fe50e 100644 --- a/src/screens/DataScreen.tsx +++ b/src/screens/DataScreen.tsx @@ -6,6 +6,7 @@ import { Link, useNavigate } from '@tanstack/react-router'; import { useShellSlot } from '@/components/layout/shell-slot'; import { ExportObservationsButton } from '@/components/shared/ExportObservationsButton'; import { FilterSheet } from '@/components/shared/FilterSheet'; +import { MapScreenLayout } from '@/components/shared/MapScreenLayout'; import { MediaPreview } from '@/components/shared/MediaPreview'; import { ObservationCategoryIcon } from '@/components/shared/ObservationCategoryIcon'; import { ObservationFilterBar } from '@/components/shared/ObservationFilterBar'; @@ -217,22 +218,6 @@ export function DataScreen() { ); } - if (viewMode === 'map') { - return ( -
- - navigate({ - to: '/data/observations/$observationId', - params: { observationId }, - }) - } - /> -
- ); - } return ( <>
@@ -283,15 +268,12 @@ export function DataScreen() { ); }, [ - filteredObs, paginatedObservations, showingStart, showingEnd, totalCount, hasMore, loadMore, - viewMode, - navigate, intl, resetFilters, displayNames, @@ -327,52 +309,36 @@ export function DataScreen() { const observations = observationsQuery.data ?? []; - return ( -
- {/* Title */} -

- {intl.formatMessage(messages.title)} -

- - {/* Toolbar */} -
- - {viewMode === 'grid' ? ( - - ) : ( + // Full-screen map view — returns early so the grid layout below only + // handles the grid case. Uses the shared MapScreenLayout (fills the + // AppShell
via h-full). Renders even when observations are empty + // or pending so the map shows its own empty/loading overlay (no grid + // flash on cold load). + if (viewMode === 'map') { + return ( + + obsFilters.setCategories([])} + onSortChange={obsFilters.setSort} + onClear={obsFilters.reset} + /> +
+ } + topRight={ - )} + } + bottomLeft={ +
+ + + obsFilters.setCategories([])} + onSortChange={obsFilters.setSort} + onClear={obsFilters.reset} + /> +
+ } + bottomRight={ + + } + > + + navigate({ + to: '/data/observations/$observationId', + params: { observationId }, + }) + } + height="h-full" + /> + + ); + } + + return ( +
+ {/* Title */} +

+ {intl.formatMessage(messages.title)} +

+ + {/* Toolbar */} +
+ +
{/* Observations content */} diff --git a/src/stores/view-mode-store.ts b/src/stores/view-mode-store.ts index 7041bc7f..ab4239d5 100644 --- a/src/stores/view-mode-store.ts +++ b/src/stores/view-mode-store.ts @@ -11,7 +11,7 @@ interface ViewModeState { export const useViewModeStore = create()( persist( (set) => ({ - viewMode: 'grid', + viewMode: 'map', setViewMode: (viewMode) => set({ viewMode }), }), { diff --git a/tests/e2e/critical-flows.e2e.ts b/tests/e2e/critical-flows.e2e.ts index 682484cb..84dec7c3 100644 --- a/tests/e2e/critical-flows.e2e.ts +++ b/tests/e2e/critical-flows.e2e.ts @@ -126,6 +126,16 @@ test.describe('Critical User Flows', () => { test('user can navigate from home to data observations list', async ({ page, }) => { + // Seed the persisted view-mode store to grid so the Data screen renders + // the grid branch (with

Data

and observation card links) instead + // of the full-screen map on a fresh context with empty localStorage. + await page.addInitScript(() => + localStorage.setItem( + 'view-mode-preference', + JSON.stringify({ state: { viewMode: 'grid' }, version: 0 }), + ), + ); + await seedProjectWithObservations(page, 'Test Project'); // Navigate to /data via the nav link @@ -148,6 +158,16 @@ test.describe('Critical User Flows', () => { test('user can navigate from data to observation detail', async ({ page, }) => { + // Seed the persisted view-mode store to grid so the Data screen renders + // the grid branch (with

Data

and observation card links) instead + // of the full-screen map on a fresh context with empty localStorage. + await page.addInitScript(() => + localStorage.setItem( + 'view-mode-preference', + JSON.stringify({ state: { viewMode: 'grid' }, version: 0 }), + ), + ); + const projectLocalId = await seedProjectWithObservations( page, 'Test Project', diff --git a/tests/unit/components/shared/MapScreenLayout/MapScreenLayout.test.tsx b/tests/unit/components/shared/MapScreenLayout/MapScreenLayout.test.tsx new file mode 100644 index 00000000..01acddb7 --- /dev/null +++ b/tests/unit/components/shared/MapScreenLayout/MapScreenLayout.test.tsx @@ -0,0 +1,86 @@ +import { render, screen } from '@tests/mocks/test-utils'; +import { beforeEach, describe, expect, it, vi } from 'vitest'; + +import { MapScreenLayout } from '@/components/shared/MapScreenLayout/MapScreenLayout'; +import { useIsDesktop } from '@/hooks/useIsDesktop'; + +// MapScreenLayout no longer renders a map itself; children supply it. +// Render a stand-in "map" element as children so slot/child assertions work. +const renderLayout = (props: Record = {}) => + render( + +
map
+ , + ); + +vi.mock('@/hooks/useIsDesktop', () => ({ + useIsDesktop: vi.fn(() => false), +})); + +describe('MapScreenLayout', () => { + beforeEach(() => { + vi.mocked(useIsDesktop).mockReturnValue(false); + }); + + it('renders the map container', () => { + renderLayout(); + expect(screen.getByTestId('map-child')).toBeInTheDocument(); + }); + + it('renders topLeft slot content', () => { + renderLayout({ topLeft: top-left-content }); + expect(screen.getByText('top-left-content')).toBeInTheDocument(); + }); + + it('renders topRight slot content', () => { + renderLayout({ topRight: top-right-content }); + expect(screen.getByText('top-right-content')).toBeInTheDocument(); + }); + + it('renders bottomLeft slot content', () => { + renderLayout({ bottomLeft: bottom-left-content }); + expect(screen.getByText('bottom-left-content')).toBeInTheDocument(); + }); + + it('renders bottomRight slot content', () => { + renderLayout({ bottomRight: bottom-right-content }); + expect(screen.getByText('bottom-right-content')).toBeInTheDocument(); + }); + + it('renders children inside map container', () => { + renderLayout(); + expect(screen.getByTestId('map-child')).toBeInTheDocument(); + expect(screen.getByTestId('map-child').parentElement).not.toBeNull(); + }); + + it('does not render sidebar on mobile', () => { + vi.mocked(useIsDesktop).mockReturnValue(false); + renderLayout({ sidebar:
Sidebar
}); + expect(screen.queryByTestId('sidebar-content')).not.toBeInTheDocument(); + }); + + it('renders sidebar on desktop', () => { + vi.mocked(useIsDesktop).mockReturnValue(true); + renderLayout({ sidebar:
Sidebar
}); + expect(screen.getByTestId('sidebar-content')).toBeInTheDocument(); + }); + + it('does not render topLeft when not provided', () => { + renderLayout(); + expect(screen.queryByText('top-left-content')).not.toBeInTheDocument(); + }); + + it('does not render sidebar when not provided even on desktop', () => { + vi.mocked(useIsDesktop).mockReturnValue(true); + renderLayout(); + // aside should not exist when sidebar is undefined + expect(document.querySelector('aside')).toBeNull(); + }); + + it('renders sidebar when null is explicitly provided on desktop', () => { + vi.mocked(useIsDesktop).mockReturnValue(true); + renderLayout({ sidebar: null }); + // null sidebar should not render the aside + expect(document.querySelector('aside')).toBeNull(); + }); +}); diff --git a/tests/unit/screens/DataScreen.test.tsx b/tests/unit/screens/DataScreen.test.tsx index 59a6ecd6..bd74af26 100644 --- a/tests/unit/screens/DataScreen.test.tsx +++ b/tests/unit/screens/DataScreen.test.tsx @@ -560,6 +560,39 @@ describe('DataScreen', () => { ).not.toBeInTheDocument(); expect(screen.getAllByText('forest').length).toBeGreaterThanOrEqual(1); }); + + it('renders map view by default when viewMode is map', () => { + useViewModeStore.setState({ viewMode: 'map' }); + mockObservationsQuery = { data: defaultObservations, isPending: false }; + + render(); + expect(screen.getByTestId('observations-map')).toBeInTheDocument(); + }); + + it('shows grid toggle button in map view and switches to grid on click', async () => { + const { userEvent } = await import('@tests/mocks/test-utils'); + const user = userEvent.setup(); + useViewModeStore.setState({ viewMode: 'map' }); + mockObservationsQuery = { data: defaultObservations, isPending: false }; + + render(); + + // Grid toggle button should be present in map view + expect( + screen.getByRole('button', { name: /switch to grid view/i }), + ).toBeInTheDocument(); + + // Click to switch to grid + await user.click( + screen.getByRole('button', { name: /switch to grid view/i }), + ); + + // Grid view should be shown + expect( + screen.queryByTestId('observations-map'), + ).not.toBeInTheDocument(); + expect(screen.getAllByText('forest').length).toBeGreaterThanOrEqual(1); + }); }); // ---- Observation filter integration ---- From 4f428f16b8f37752b3b6e157c0403fb3f72a33b2 Mon Sep 17 00:00:00 2001 From: luandro Date: Tue, 28 Jul 2026 11:44:17 -0300 Subject: [PATCH 2/2] chore(visual-regression): add MapScreenLayout baseline screenshots New component introduced in #132 ships 5 Storybook stories (default, non-interactive, with-bottom-buttons, with-sidebar, with-top-right) at both desktop and mobile viewports. These had no committed baseline, so the visual-regression-check reported 5 added and failed CI. Add the generated baselines so the check passes. Pre-existing baseline PNGs were intentionally left untouched (their drift was tooling noise, not code change). --- .../components-mapscreenlayout--default.png | Bin 0 -> 6586 bytes ...ponents-mapscreenlayout--non-interactive.png | Bin 0 -> 6586 bytes ...nts-mapscreenlayout--with-bottom-buttons.png | Bin 0 -> 9663 bytes ...components-mapscreenlayout--with-sidebar.png | Bin 0 -> 11424 bytes ...mponents-mapscreenlayout--with-top-right.png | Bin 0 -> 7181 bytes .../components-mapscreenlayout--default.png | Bin 0 -> 3259 bytes ...ponents-mapscreenlayout--non-interactive.png | Bin 0 -> 3259 bytes ...nts-mapscreenlayout--with-bottom-buttons.png | Bin 0 -> 6243 bytes ...components-mapscreenlayout--with-sidebar.png | Bin 0 -> 3259 bytes ...mponents-mapscreenlayout--with-top-right.png | Bin 0 -> 3818 bytes 10 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 tests/e2e/storybook-screenshots-baseline/desktop/components-mapscreenlayout--default.png create mode 100644 tests/e2e/storybook-screenshots-baseline/desktop/components-mapscreenlayout--non-interactive.png create mode 100644 tests/e2e/storybook-screenshots-baseline/desktop/components-mapscreenlayout--with-bottom-buttons.png create mode 100644 tests/e2e/storybook-screenshots-baseline/desktop/components-mapscreenlayout--with-sidebar.png create mode 100644 tests/e2e/storybook-screenshots-baseline/desktop/components-mapscreenlayout--with-top-right.png create mode 100644 tests/e2e/storybook-screenshots-baseline/mobile/components-mapscreenlayout--default.png create mode 100644 tests/e2e/storybook-screenshots-baseline/mobile/components-mapscreenlayout--non-interactive.png create mode 100644 tests/e2e/storybook-screenshots-baseline/mobile/components-mapscreenlayout--with-bottom-buttons.png create mode 100644 tests/e2e/storybook-screenshots-baseline/mobile/components-mapscreenlayout--with-sidebar.png create mode 100644 tests/e2e/storybook-screenshots-baseline/mobile/components-mapscreenlayout--with-top-right.png diff --git a/tests/e2e/storybook-screenshots-baseline/desktop/components-mapscreenlayout--default.png b/tests/e2e/storybook-screenshots-baseline/desktop/components-mapscreenlayout--default.png new file mode 100644 index 0000000000000000000000000000000000000000..3b6ca53a4ddd964266879270ac703fdfc8e68cc9 GIT binary patch literal 6586 zcmeAS@N?(olHy`uVBq!ia0y~yU|qn#z}&*Y1QfZU&)CYqAi&`1;uumf=gr-_MYkfP z90EN#{;L?j|3A(6WnVHobI|F7g%{72mhV}8O^e5!{WH_|{%Km$I_nb-Z z=REWCx1S#cn#b^g|K_G6)6}Mw+RmMJ`R5*;`qLu&+d6a8>#iH!i+%Tf_wCu0lT3i> z8tPA9Q{0wj$oqKD?6$;vUdJE)EU}rVe?RWl(b8u(%8uE~?~9M$zqWk$%YS9|zL(fQ zM*r45{p)Xm&D`nR=e|B>7;kq^_RfyockjO`X9mh1IBwwkc=_+y&mUKwmYF{H^#V4gMm)^ZG>v+B0{daNi@)?10KRTY>-SV`%+}L8- z{MFO1FW6^d8@6*X+g zEYFN~H4qh;b~y)arGjy4HKn?<8d!_nq3Fc;9JN$}tF z`Ah}|&ScP704_Vhz1Dzj>kexYL~MEqVO$&rNllGLJ3t-t*t* zJASzmWa5txe#<{kGisY3nY`=YyZ-h5&yN~_Y<}Q;`_s|s>;11=U+zEiG0M8F^v8es z{`}?EAWe3&9>3i4v|Bfc$G-X4H?zIJmzT!wuc_T*lgJ9zT4^P-|Ig1IPrJ9zJw3Dc z=cZfVwm;igYs>f8Y7KvX`{BAl{ibNb=WFEuuE&)fUu{s}T)*UR63 zEEgo7`_2~B@&CjE4sQPkAhA)-Xc&y9gVDUepfDN+qhSCn2}aWa{lnlNaP0p7f9)rs hV!#Ms12wmp8SLVGDz`4wyACRxJzf1=);T3K0RT1(8}a}E literal 0 HcmV?d00001 diff --git a/tests/e2e/storybook-screenshots-baseline/desktop/components-mapscreenlayout--non-interactive.png b/tests/e2e/storybook-screenshots-baseline/desktop/components-mapscreenlayout--non-interactive.png new file mode 100644 index 0000000000000000000000000000000000000000..3b6ca53a4ddd964266879270ac703fdfc8e68cc9 GIT binary patch literal 6586 zcmeAS@N?(olHy`uVBq!ia0y~yU|qn#z}&*Y1QfZU&)CYqAi&`1;uumf=gr-_MYkfP z90EN#{;L?j|3A(6WnVHobI|F7g%{72mhV}8O^e5!{WH_|{%Km$I_nb-Z z=REWCx1S#cn#b^g|K_G6)6}Mw+RmMJ`R5*;`qLu&+d6a8>#iH!i+%Tf_wCu0lT3i> z8tPA9Q{0wj$oqKD?6$;vUdJE)EU}rVe?RWl(b8u(%8uE~?~9M$zqWk$%YS9|zL(fQ zM*r45{p)Xm&D`nR=e|B>7;kq^_RfyockjO`X9mh1IBwwkc=_+y&mUKwmYF{H^#V4gMm)^ZG>v+B0{daNi@)?10KRTY>-SV`%+}L8- z{MFO1FW6^d8@6*X+g zEYFN~H4qh;b~y)arGjy4HKn?<8d!_nq3Fc;9JN$}tF z`Ah}|&ScP704_Vhz1Dzj>kexYL~MEqVO$&rNllGLJ3t-t*t* zJASzmWa5txe#<{kGisY3nY`=YyZ-h5&yN~_Y<}Q;`_s|s>;11=U+zEiG0M8F^v8es z{`}?EAWe3&9>3i4v|Bfc$G-X4H?zIJmzT!wuc_T*lgJ9zT4^P-|Ig1IPrJ9zJw3Dc z=cZfVwm;igYs>f8Y7KvX`{BAl{ibNb=WFEuuE&)fUu{s}T)*UR63 zEEgo7`_2~B@&CjE4sQPkAhA)-Xc&y9gVDUepfDN+qhSCn2}aWa{lnlNaP0p7f9)rs hV!#Ms12wmp8SLVGDz`4wyACRxJzf1=);T3K0RT1(8}a}E literal 0 HcmV?d00001 diff --git a/tests/e2e/storybook-screenshots-baseline/desktop/components-mapscreenlayout--with-bottom-buttons.png b/tests/e2e/storybook-screenshots-baseline/desktop/components-mapscreenlayout--with-bottom-buttons.png new file mode 100644 index 0000000000000000000000000000000000000000..cc8e78c36543332d2d8bf012c7c57605be54e161 GIT binary patch literal 9663 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 NpS^gd(!uw)e*xoyH!%PJ literal 0 HcmV?d00001 diff --git a/tests/e2e/storybook-screenshots-baseline/desktop/components-mapscreenlayout--with-sidebar.png b/tests/e2e/storybook-screenshots-baseline/desktop/components-mapscreenlayout--with-sidebar.png new file mode 100644 index 0000000000000000000000000000000000000000..d1d63a14e0b836a9e3ef6f73de68f86ebe2463bb GIT binary patch literal 11424 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 literal 0 HcmV?d00001 diff --git a/tests/e2e/storybook-screenshots-baseline/mobile/components-mapscreenlayout--default.png b/tests/e2e/storybook-screenshots-baseline/mobile/components-mapscreenlayout--default.png new file mode 100644 index 0000000000000000000000000000000000000000..ddb81c022833bb883103dc8652c232b06b16920d GIT binary patch literal 3259 zcmeAS@N?(olHy`uVBq!ia0y~yU@T`~VAkPa0*WYlpmq zc-$*2X7oiE)*Gg)yzQ5mYPu>5bJ#pvd*KJR(n#u6*!i)^L zvfqb4e%bWN%4GKG)3XJiJ*%qT8tczce^A2Ru5L%w9eMX`J?-`Fvnqcn8qT+i@#Oii z+0EQ7J8pfnZS zbm+OMH}lfI1Ld-9*B@JXxn$?DlG?2^8SdRad-dmS*4c%=Czt65NaR}9_h;@lJ;5;b z?G3hjYu*AGpWpR7w_uq2xi~o{mdWb*@}RlXT+#X)$jJVH=eg4U*BsFq#cUONP-haj4b?z&g_Cw9(n+myH-r{7!qO zHeAp+W8-BEh{oBirNj|Wx-FrKhZ=Uw&9riYFa+sOl zCx1!VZy(opeyXJM*&n~ZmTk9}QE!MZwvci6UzVTy^WE)9`)haF&&#>MP=7z;#B=@c z>%*Tdzh=?wCvQ*1IwBxz7@}O6?c^&|hMuyFAr$?z!?iw(sWWzxZotxPI-v zUGn@ImZD6fEr-#@)Szlc{^e(2`2RoCR&6D)3&IBKdoVN9UGzTb@P}UpD8k_B>gTe~ HDWM4fIFk!d literal 0 HcmV?d00001 diff --git a/tests/e2e/storybook-screenshots-baseline/mobile/components-mapscreenlayout--non-interactive.png b/tests/e2e/storybook-screenshots-baseline/mobile/components-mapscreenlayout--non-interactive.png new file mode 100644 index 0000000000000000000000000000000000000000..ddb81c022833bb883103dc8652c232b06b16920d GIT binary patch literal 3259 zcmeAS@N?(olHy`uVBq!ia0y~yU@T`~VAkPa0*WYlpmq zc-$*2X7oiE)*Gg)yzQ5mYPu>5bJ#pvd*KJR(n#u6*!i)^L zvfqb4e%bWN%4GKG)3XJiJ*%qT8tczce^A2Ru5L%w9eMX`J?-`Fvnqcn8qT+i@#Oii z+0EQ7J8pfnZS zbm+OMH}lfI1Ld-9*B@JXxn$?DlG?2^8SdRad-dmS*4c%=Czt65NaR}9_h;@lJ;5;b z?G3hjYu*AGpWpR7w_uq2xi~o{mdWb*@}RlXT+#X)$jJVH=eg4U*BsFq#cUONP-haj4b?z&g_Cw9(n+myH-r{7!qO zHeAp+W8-BEh{oBirNj|Wx-FrKhZ=Uw&9riYFa+sOl zCx1!VZy(opeyXJM*&n~ZmTk9}QE!MZwvci6UzVTy^WE)9`)haF&&#>MP=7z;#B=@c z>%*Tdzh=?wCvQ*1IwBxz7@}O6?c^&|hMuyFAr$?z!?iw(sWWzxZotxPI-v zUGn@ImZD6fEr-#@)Szlc{^e(2`2RoCR&6D)3&IBKdoVN9UGzTb@P}UpD8k_B>gTe~ HDWM4fIFk!d literal 0 HcmV?d00001 diff --git a/tests/e2e/storybook-screenshots-baseline/mobile/components-mapscreenlayout--with-bottom-buttons.png b/tests/e2e/storybook-screenshots-baseline/mobile/components-mapscreenlayout--with-bottom-buttons.png new file mode 100644 index 0000000000000000000000000000000000000000..d473bb77600ad0b1a0d153010a0f13668315cadc GIT binary patch literal 6243 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 HDWM4fIFk!d literal 0 HcmV?d00001 diff --git a/tests/e2e/storybook-screenshots-baseline/mobile/components-mapscreenlayout--with-top-right.png b/tests/e2e/storybook-screenshots-baseline/mobile/components-mapscreenlayout--with-top-right.png new file mode 100644 index 0000000000000000000000000000000000000000..f61c11e719ff4a4ecb0af439dc622a9f4ae32922 GIT binary patch literal 3818 zcmeH~YfzF|7{_0<)o$9fxtW$)Q@iX~Vk%m$pmtfYwZKx-vb3@!Q_}LDDAvw)vvhX7 zpn|X)t8PPR28L!{%9Ke6q%sra;%X2X*k{?Gq+<~&zI zu^5}hj*9^Ru-O&7a~}Y}G6BGH(?W~6$lA1Y4glEFckSF3o<)5tYcKj!y{!Yx#N$a+ zQO4J6HfAi}1lxNfI6rj3zN^ne191;r0$~>}IB%%53q}S9_lEUu-}c6??DCq0WfzK9 zoxeVkdK~Vn&}wDo%ExTKoKY~Q(X8OD(fl*x)mh)%-o}c7 zq{OyXG`&c%am5&jlx&{49fiQ*>}&D(f-dWW;BlvJf$?ByU8`(hKrXEkrG3@3`Pk-% z9+d8$IG;WGUnz{?XT`Po>+ltr|1I%#apgos zM0EV<6^EhhnMwKNw0333B_E%}pdEEuzQDOiNTNv;4dNw4JI1=Wkj&B&enrAPVrn9Z z=V~?eTBRR&{rG*88@sQ*LD*n#nbh<8aTi0U?>&Tw**^q(Sz_Wv_|^-AMAf0Cw+~3! ztTUrX7R^Je6~goPNEK)(?Ew)Lc1N?sE+|?Uz~ivv)>(#Ubo-1ErG-mFeHB$8+BQ&a z%!xxCw)jD<_^B}pal-2IrrHFAM<71264hyS(AAO?ZgukJ(%yXzzgK$(hMdSR>jB(K zVILC2=B0zgWFu6C!SF`C=vgX_y}y2N)!?+b#h?p_YUi|b4Nvj0=3r+U&vA1Q16DcuCR>rT1Tc>n6ElpV6{Sy_&?%T_zR zF_k`3jYIoc1x$%^-kFuUnQA<}+4MKwA5AE1oRf+Nhxg+PadkE?5LMXK)t)Jxt&=in zR@x5L!qt$f9wH9*7$1dYlR!8rExk#_2y~}Y*>_1$vPw>*@wAv#Q6BiU( zC*)s~DU$O>8*^5py%}@WSZ2qk>^+>W;Y|GYiZu)e&W(hqzM0>iYmykv za`~yT@hve<0i)#8+ILvWaJcgz5t>y+_Y1p>&yyP@xf-@RmcsB1y}=0m?|E&C9b-F3_thFr=2r3d(9Z~4IYPZsn>QQh!x zxT|G2RwRt)@!%^0hs9#e+oT2*x{(U=N#>krK18FFv$N7rup~(*Mop+75C~3A*Q4Ql zha<&75ru^~%u$5M?7x*Ww_c+hJL%nYO8`FBFxE>uI^wU5kfO6)n(M($Sx-rn;_Q9BhSBa^o|^mHd(2d=2KEQw%E=@Gm(N zfOPacOiW6MC#%Uf22)ye(V*fdujV8y7I;&PWE2Qs&Y^@_8G z(mA~Rxfj>K<>ta{#=NLBH(O^Es(GuzZ?2lm`S8n`A(=IE@|H!KFKxdUKRU+`hi>Ge zpE)Ywt6DZ+x`c`QCN-PHDJy5n%10H)8ryC-41;u@C`$ZRCop8F*+&x-jgaJtW zQ3(42{fbN;oNRrLzFTmQWvK@9e~Vr>PwPCbUrOu$%^9EO`wMowD1re11U=CdyqTL= etv-yZmcaS~YeFf{&NLSRcKwLmS-1Vjg?|9-o^f;l literal 0 HcmV?d00001