From 8dfb783d98fb4d38e54fdc0885597dd3eb190d38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?B=C3=A1rbara=20Chaves?= <barbara.chaves@vizzuality.com>
Date: Thu, 31 Oct 2024 16:20:49 +0100
Subject: [PATCH] Client/feature/mobile version (#76)

* Mobile version
---
 client/src/app/layout-providers.tsx           |   1 -
 .../components/map/layers/marker/index.tsx    |  14 ++-
 client/src/components/map/legend/index.tsx    |   7 +-
 client/src/components/ui/carousel/index.tsx   |   6 +-
 .../src/components/ui/scroll-explanation.tsx  |   2 +-
 .../src/containers/globe/categories/index.tsx |   3 +-
 client/src/containers/globe/filters/index.tsx |  22 ++--
 client/src/containers/globe/index.tsx         |  12 +-
 client/src/containers/header/index.tsx        |  11 +-
 client/src/containers/home/index.tsx          |  55 ++-------
 client/src/containers/map/index.tsx           | 105 +++++++++++++-----
 .../map/markers/globe-markers/index.tsx       |  26 ++++-
 .../markers/selected-stories-marker/index.tsx |   5 +-
 client/src/containers/story/header.tsx        |  16 +--
 .../story/steps/layouts/outro-step.tsx        |  17 +--
 client/src/hooks/map/index.ts                 |  31 ++++++
 client/src/hooks/screen-size/index.ts         |  34 +++---
 client/src/lib/stories/index.ts               |   2 +
 client/tailwind.config.js                     |   4 +-
 19 files changed, 218 insertions(+), 155 deletions(-)

diff --git a/client/src/app/layout-providers.tsx b/client/src/app/layout-providers.tsx
index 958af46..c4d998f 100644
--- a/client/src/app/layout-providers.tsx
+++ b/client/src/app/layout-providers.tsx
@@ -5,7 +5,6 @@ import { PropsWithChildren, useState } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 import { TooltipProvider } from '@/components/ui/tooltip';
-
 import { notesESA, openSans } from '@/styles/fonts';
 
 export default function Providers({ children }: PropsWithChildren) {
diff --git a/client/src/components/map/layers/marker/index.tsx b/client/src/components/map/layers/marker/index.tsx
index 5f6585e..3a9752c 100644
--- a/client/src/components/map/layers/marker/index.tsx
+++ b/client/src/components/map/layers/marker/index.tsx
@@ -1,11 +1,15 @@
+'use client';
+
 import { Marker as RMarker } from 'react-map-gl';
 
+import { XIcon } from 'lucide-react';
+
 import { cn } from '@/lib/classnames';
 
+import { useIsMobile } from '@/hooks/screen-size';
+
 import { Button } from '@/components/ui/button';
 import CategoryIcon from '@/components/ui/category-icon';
-import { useBreakpoint } from '@/hooks/screen-size';
-import { XIcon } from 'lucide-react';
 
 type MarkerProps = {
   markers?: (GeoJSON.Feature<GeoJSON.Point> | null)[];
@@ -16,7 +20,7 @@ type MarkerProps = {
 const Marker = ({ markers, handleClick, handleClose }: MarkerProps) => {
   const { coordinates } = markers?.[0]?.geometry || {};
 
-  const isMobile = !useBreakpoint()('sm');
+  const isMobile = useIsMobile();
 
   if (!coordinates?.length) return null;
 
@@ -55,9 +59,9 @@ const Marker = ({ markers, handleClick, handleClose }: MarkerProps) => {
                 />
                 <p className="font-open-sans text-xs">{marker?.properties?.categoryName}</p>
                 <Button
-                  className="absolute right-0 top-0"
+                  className="absolute right-0 top-0 sm:hidden"
                   size="icon"
-                  variant="ghost"
+                  variant="icon"
                   onClick={handleClose}
                 >
                   <XIcon className="h-5 w-5" />
diff --git a/client/src/components/map/legend/index.tsx b/client/src/components/map/legend/index.tsx
index c18675e..e0b0f4d 100644
--- a/client/src/components/map/legend/index.tsx
+++ b/client/src/components/map/legend/index.tsx
@@ -1,10 +1,12 @@
+'use client';
+
 import React, { useMemo, Children, isValidElement } from 'react';
 
 import { ChevronDown } from 'lucide-react';
 
 import { cn } from '@/lib/classnames';
 
-import { useBreakpoint } from '@/hooks/screen-size';
+import { useIsMobile } from '@/hooks/screen-size';
 
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 
@@ -15,8 +17,7 @@ export const Legend: React.FC<LegendProps> = ({ children, className = '' }: Lege
     return !!Children.count(Children.toArray(children).filter((c) => isValidElement(c)));
   }, [children]);
 
-  const breakpoint = useBreakpoint();
-  const isMobile = !breakpoint('sm');
+  const isMobile = useIsMobile();
 
   return (
     isChildren && (
diff --git a/client/src/components/ui/carousel/index.tsx b/client/src/components/ui/carousel/index.tsx
index 6dd1f38..e7e07e4 100644
--- a/client/src/components/ui/carousel/index.tsx
+++ b/client/src/components/ui/carousel/index.tsx
@@ -8,12 +8,14 @@ import React, {
   useState,
 } from 'react';
 
+import Image from 'next/image';
+
 import { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel';
 import useEmblaCarousel from 'embla-carousel-react';
-import Image from 'next/image';
+import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+
 import { cn } from '@/lib/classnames';
 import { getImageSrc } from '@/lib/image-src';
-import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
 
 type UseDotButtonType = {
   selectedIndex: number;
diff --git a/client/src/components/ui/scroll-explanation.tsx b/client/src/components/ui/scroll-explanation.tsx
index 81bcc3b..4ea9906 100644
--- a/client/src/components/ui/scroll-explanation.tsx
+++ b/client/src/components/ui/scroll-explanation.tsx
@@ -4,7 +4,7 @@ const ScrollExplanation = ({ children }: PropsWithChildren) => {
   return (
     <div className="font-notes z-10 flex w-full items-center justify-center gap-2 text-center text-sm italic text-white">
       <div className="flex h-8 w-4 justify-center rounded-full border border-gray-200 bg-gray-900">
-        <div className="animate-fade-down h-2 w-2 rounded-full bg-gray-200" />
+        <div className="animate-fade-up sm:animate-fade-down h-2 w-2 rounded-full bg-gray-200" />
       </div>
       <p>{children}</p>
     </div>
diff --git a/client/src/containers/globe/categories/index.tsx b/client/src/containers/globe/categories/index.tsx
index 81668d5..5819fe0 100644
--- a/client/src/containers/globe/categories/index.tsx
+++ b/client/src/containers/globe/categories/index.tsx
@@ -1,10 +1,11 @@
+import { cn } from '@/lib/classnames';
+
 import { useGetCategories } from '@/types/generated/category';
 
 import ContentLoader from '@/components/ui/loader';
 import { Skeleton } from '@/components/ui/skeleton';
 
 import Category from './item';
-import { cn } from '@/lib/classnames';
 
 type CategoriesProps = {
   className?: string;
diff --git a/client/src/containers/globe/filters/index.tsx b/client/src/containers/globe/filters/index.tsx
index 0a2ee22..74d5047 100644
--- a/client/src/containers/globe/filters/index.tsx
+++ b/client/src/containers/globe/filters/index.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { useMemo } from 'react';
 
 import {
@@ -8,21 +10,24 @@ import {
   DialogPortal,
   DialogOverlay,
 } from '@radix-ui/react-dialog';
+import { RadioGroup, RadioGroupItem } from '@radix-ui/react-radio-group';
 import { FilterIcon, XIcon } from 'lucide-react';
 
 import { cn } from '@/lib/classnames';
 
+import { useSyncCategory } from '@/store/globe';
+
+import { useGetCategories } from '@/types/generated/category';
 import { useGetIfis } from '@/types/generated/ifi';
 import { useGetTags } from '@/types/generated/tag';
 
-import FilterItem from './item';
-import { useGetCategories } from '@/types/generated/category';
-import { useSyncCategory } from '@/store/globe';
-import { RadioGroup, RadioGroupItem } from '@radix-ui/react-radio-group';
-import { useBreakpoint } from '@/hooks/screen-size';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { DialogHeader } from '@/components/ui/dialog';
+import { useIsMobile } from '@/hooks/screen-size';
+
 import { Button } from '@/components/ui/button';
+import { DialogHeader } from '@/components/ui/dialog';
+import { ScrollArea } from '@/components/ui/scroll-area';
+
+import FilterItem from './item';
 
 type FiltersProps = {
   filtersActive: boolean;
@@ -33,8 +38,7 @@ const Filters = ({ filtersActive }: FiltersProps) => {
   const { data: ifisData } = useGetIfis({ 'pagination[limit]': 1000 });
   const { data: categoriesData } = useGetCategories();
 
-  const breakpoint = useBreakpoint();
-  const isMobile = !breakpoint('sm');
+  const isMobile = useIsMobile();
   const filtersData = useMemo(() => {
     return [
       {
diff --git a/client/src/containers/globe/index.tsx b/client/src/containers/globe/index.tsx
index 17caf18..f57bc93 100644
--- a/client/src/containers/globe/index.tsx
+++ b/client/src/containers/globe/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect } from 'react';
-import { motion } from 'framer-motion';
+
 import { useMap } from 'react-map-gl';
 
 import { useSetAtom } from 'jotai';
@@ -14,7 +14,8 @@ import { useSyncFilters } from '@/store/globe';
 import { layersAtom, tmpBboxAtom } from '@/store/map';
 import { useSyncStep } from '@/store/stories';
 
-import { useBreakpoint } from '@/hooks/screen-size';
+import { setMapEnable } from '@/hooks/map';
+import { useIsMobile } from '@/hooks/screen-size';
 import useStories from '@/hooks/stories/useStories';
 
 import { DEFAULT_MOBILE_ZOOM, DEFAULT_VIEW_STATE } from '@/components/map/constants';
@@ -47,8 +48,7 @@ export default function Home() {
   const storiesLength = storiesData?.data?.length;
   const { default: map } = useMap();
 
-  const breakpoint = useBreakpoint();
-  const isMobile = !breakpoint('sm');
+  const isMobile = useIsMobile();
 
   useEffect(() => {
     const bounds = new mapboxgl.LngLatBounds();
@@ -74,6 +74,10 @@ export default function Home() {
         zoom: isMobile ? DEFAULT_MOBILE_ZOOM : DEFAULT_VIEW_STATE.zoom,
       },
     });
+
+    const MAP = map?.getMap();
+    setMapEnable(MAP, true);
+    map?.resize();
   }, [isMobile, map, setTmpBbox, storiesData?.data]);
 
   useEffect(() => {
diff --git a/client/src/containers/header/index.tsx b/client/src/containers/header/index.tsx
index d05df29..e76d053 100644
--- a/client/src/containers/header/index.tsx
+++ b/client/src/containers/header/index.tsx
@@ -17,7 +17,7 @@ const Header = ({ pathname, className }: HeaderProps) => {
   return (
     <header className={cn('pointer-events-auto z-50', className)}>
       <div className="flex items-center justify-between space-x-1.5 px-4 py-4 sm:px-0">
-        <div className="flex flex-1 items-center space-x-3">
+        <div className={cn('flex items-center space-x-3', !isHome && 'flex-1')}>
           <div className="flex shrink-0 items-center space-x-3">
             <a href="https://gda.esa.int/" target="_blank" rel="noreferrer">
               <Image
@@ -36,14 +36,15 @@ const Header = ({ pathname, className }: HeaderProps) => {
               />
             </a>
           </div>
-          <GradientLine className={cn('flex-1', isHome && 'hidden sm:block')} />
+          <GradientLine className={cn('flex-1', isHome && 'hidden')} />
         </div>
 
-        <div className={cn('py-2 sm:px-4', isHome && 'hidden sm:flex')}>
-          <h1 className="text-xs font-bold uppercase tracking-[2.4px] sm:text-base sm:font-normal sm:tracking-[6.4px]">
+        <div className={cn('py-2 sm:px-4', isHome && 'hidden')}>
+          <p className="text-xs font-bold uppercase tracking-[2.4px] sm:text-base sm:font-normal sm:tracking-[6.4px]">
             <Link href="/home">Impact Sphere</Link>
-          </h1>
+          </p>
         </div>
+
         <div className={cn('flex flex-1 items-center space-x-3', !isHome && 'hidden sm:flex')}>
           <GradientLine className={cn('flex-1')} />
           <div className="text-sm font-bold uppercase tracking-widest">
diff --git a/client/src/containers/home/index.tsx b/client/src/containers/home/index.tsx
index 284af84..1110267 100644
--- a/client/src/containers/home/index.tsx
+++ b/client/src/containers/home/index.tsx
@@ -1,18 +1,17 @@
 'use client';
 
-import { useEffect, useState, useMemo, useCallback, useRef } from 'react';
+import { useEffect, useState, useMemo, useCallback } from 'react';
 
 import { useMap } from 'react-map-gl';
 
 import Link from 'next/link';
-import { useRouter } from 'next/navigation';
 
-import { motion, useMotionValueEvent, useScroll } from 'framer-motion';
+import { motion } from 'framer-motion';
 import { useAtomValue, useSetAtom } from 'jotai';
 
 import { homeMarkerAtom } from '@/store/home';
 
-import { useBreakpoint } from '@/hooks/screen-size';
+import { useIsMobile } from '@/hooks/screen-size';
 
 import { DEFAULT_MOBILE_ZOOM } from '@/components/map/constants';
 import { Dialog, DialogContentHome } from '@/components/ui/dialog';
@@ -34,11 +33,8 @@ const Home = () => {
     width: 1,
     height: 1,
   });
-  const breakpoint = useBreakpoint();
-  const isMobile = !breakpoint('sm');
-  const isLg = breakpoint('xl');
 
-  const [paddingTop, setPaddingTop] = useState(0);
+  const isMobile = useIsMobile();
 
   const spin = useCallback(() => {
     if (!map) return;
@@ -56,16 +52,17 @@ const Home = () => {
       padding: {
         left: !isMobile ? size.width * 0.45 : 0,
         right: 0,
-        top: isMobile ? paddingTop : 0,
-        bottom: isLg || isMobile ? 0 : size.height * 0.5,
+        top: 0,
+        bottom: 0,
       },
       easing: (n) => n,
     });
-  }, [isLg, isMobile, map, paddingTop, size.height, size.width]);
+  }, [isMobile, map, size.width]);
 
   useEffect(() => {
     if (map) {
       spin();
+      map.resize();
       map.on('moveend', spin);
       return () => {
         map.stop();
@@ -81,7 +78,6 @@ const Home = () => {
       const w = window?.innerWidth || 1;
       const h = window?.innerHeight || 1;
       setSize({ width: w, height: h });
-      setPaddingTop(h * 1);
     };
 
     if (typeof window !== 'undefined') {
@@ -104,42 +100,9 @@ const Home = () => {
     visible: { opacity: 1 },
   };
 
-  const [firstRender, setFirstRender] = useState(true);
-
-  useEffect(() => {
-    // Scroll to top on first render
-    if (typeof window !== 'undefined') {
-      window.scroll({ top: 0 });
-    }
-    // Prevent pushing to globe before scrolling top on first render
-    setFirstRender(false);
-  }, []);
-
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  const { scrollYProgress } = useScroll({
-    target: containerRef,
-    axis: 'y',
-    offset: ['start start', 'end end'],
-    layoutEffect: false,
-  });
-
-  const router = useRouter();
-  useMotionValueEvent(scrollYProgress, 'change', (v) => {
-    if (!isMobile || firstRender) return;
-    setPaddingTop(size.height * (1 - v));
-
-    if (v > 0.8) {
-      router.push('/globe');
-    }
-  });
-
   return (
     <>
-      <div
-        ref={containerRef}
-        className="text-primary font-notes pointer-events-none absolute flex h-[150vh] min-h-screen w-screen flex-col justify-between sm:h-screen sm:overflow-hidden"
-      >
+      <div className="text-primary font-notes pointer-events-none absolute flex h-screen min-h-screen w-screen flex-col justify-between">
         <div className="fixed top-0 flex h-screen w-screen flex-col overflow-hidden">
           <div className="sm:mx-12">
             <Header pathname="home" />
diff --git a/client/src/containers/map/index.tsx b/client/src/containers/map/index.tsx
index 5c8d6ee..cc34170 100644
--- a/client/src/containers/map/index.tsx
+++ b/client/src/containers/map/index.tsx
@@ -1,12 +1,13 @@
 'use client';
 
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { MapLayerMouseEvent, useMap } from 'react-map-gl';
 
 import dynamic from 'next/dynamic';
-import { usePathname } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 
+import { useMotionValueEvent, useScroll } from 'framer-motion';
 import { useAtomValue, useSetAtom } from 'jotai';
 import { LngLatBoundsLike } from 'mapbox-gl';
 
@@ -20,7 +21,6 @@ import { MAPBOX_STYLES } from '@/constants/map';
 
 import GlobeMarkers from '@/containers/map/markers/globe-markers';
 import StoryMarkers from '@/containers/map/markers/story-markers';
-import Popup from '@/containers/map/popup';
 
 import Map from '@/components/map';
 import { DEFAULT_PROPS } from '@/components/map/constants';
@@ -34,7 +34,7 @@ const LayerManager = dynamic(() => import('@/containers/map/layer-manager'), {
 
 export default function MapContainer() {
   const { id, initialViewState, minZoom, maxZoom } = DEFAULT_PROPS;
-
+  const router = useRouter();
   const { [id]: map } = useMap();
 
   const [markers, setMarkers] = useState<(GeoJSON.Feature<GeoJSON.Point> | null)[]>([]);
@@ -49,9 +49,9 @@ export default function MapContainer() {
 
   const pathname = usePathname();
 
-  const isGlobePage = useMemo(() => pathname.includes('globe'), [pathname]);
-  const isLandingPage = useMemo(() => pathname.includes('home'), [pathname]);
   const isStoriesPage = useMemo(() => pathname.includes('stories'), [pathname]);
+  const isLandingPage = useMemo(() => pathname.includes('home'), [pathname]);
+  const isGlobePage = useMemo(() => pathname.includes('globe'), [pathname]);
 
   const tmpBounds: CustomMapProps['bounds'] = useMemo(() => {
     if (tmpBbox?.bbox) {
@@ -78,26 +78,30 @@ export default function MapContainer() {
     }
   }, [map, setBbox, setTmpBbox]);
 
-  const handleMouseMove = useCallback((e: MapLayerMouseEvent) => {
-    if (e.features?.length) {
-      const storyMarkersFeatures = e.features
-        .filter((f) => f.source === 'story-markers')
-        .map((f) => ({
-          ...f,
-          geometry: f.geometry as GeoJSON.Point,
-        }));
-
-      if (storyMarkersFeatures.length) {
-        setMarkers(storyMarkersFeatures as GeoJSON.Feature<GeoJSON.Point>[]);
-      } else {
-        setMarkers([]);
+  const handleMouseMove = useCallback(
+    (e: MapLayerMouseEvent) => {
+      if (!isGlobePage) return;
+      if (e.features?.length) {
+        const storyMarkersFeatures = e.features
+          .filter((f) => f.source === 'story-markers')
+          .map((f) => ({
+            ...f,
+            geometry: f.geometry as GeoJSON.Point,
+          }));
+
+        if (storyMarkersFeatures.length) {
+          setMarkers(storyMarkersFeatures as GeoJSON.Feature<GeoJSON.Point>[]);
+        } else {
+          setMarkers([]);
+        }
       }
-    }
 
-    if (e.features?.length === 0) {
-      setMarkers([]);
-    }
-  }, []);
+      if (e.features?.length === 0) {
+        setMarkers([]);
+      }
+    },
+    [isGlobePage]
+  );
 
   useEffect(() => {
     if (map && tmpBbox?.options) {
@@ -114,9 +118,41 @@ export default function MapContainer() {
     }
   }, [map, initialViewState, tmpBbox]);
 
+  const targetRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const { scrollYProgress } = useScroll({
+    target: targetRef,
+    axis: 'y',
+    offset: ['start start', 'end end'],
+    layoutEffect: false,
+    smooth: 0.5,
+    container: containerRef,
+  });
+
+  useMotionValueEvent(scrollYProgress, 'change', (v) => {
+    if (isLandingPage && v > 0.9) {
+      router.push('/globe');
+    }
+  });
+
   return (
-    <div>
-      <div className={cn('bg-map-background fixed left-0 top-0 h-screen w-screen')}>
+    <div
+      className={cn(
+        'absolute left-0 top-0 h-screen w-screen overflow-hidden',
+        isLandingPage && 'h-[150vh] overflow-y-auto sm:h-screen'
+      )}
+      ref={containerRef}
+    >
+      <div
+        ref={targetRef}
+        className={cn(
+          'bg-map-background left-0 top-0 w-screen',
+          isLandingPage
+            ? 'sticky top-[120vh] h-[200vh] sm:fixed sm:top-0 sm:h-screen'
+            : 'fixed h-screen'
+        )}
+      >
         <Map
           id={id}
           initialViewState={{
@@ -135,12 +171,21 @@ export default function MapContainer() {
           interactiveLayerIds={layersInteractiveIds}
           onMouseMove={handleMouseMove}
           onMapViewStateChange={handleMapViewStateChange}
-          className={cn(!isGlobePage && 'pointer-events-none cursor-default')}
-          interactive={isGlobePage}
+          boxZoom={false}
+          scrollZoom={false}
+          dragPan={false}
+          dragRotate={false}
+          keyboard={false}
+          doubleClickZoom={false}
+          touchZoomRotate={false}
+          className={cn(
+            isGlobePage
+              ? 'pointer-events-auto cursor-pointer'
+              : 'pointer-events-none cursor-default'
+          )}
         >
           <LayerManager />
-          <Popup />
-          {(isGlobePage || isLandingPage) && <GlobeMarkers />}
+          <GlobeMarkers />
           <SelectedStoriesMarker markers={markers} onCloseMarker={() => setMarkers([])} />
           {isStoriesPage && <StoryMarkers />}
         </Map>
diff --git a/client/src/containers/map/markers/globe-markers/index.tsx b/client/src/containers/map/markers/globe-markers/index.tsx
index ff2da45..2d3f831 100644
--- a/client/src/containers/map/markers/globe-markers/index.tsx
+++ b/client/src/containers/map/markers/globe-markers/index.tsx
@@ -1,12 +1,14 @@
 'use client';
 
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 
-import { Layer, Source } from 'react-map-gl';
+import { Layer, Source, useMap } from 'react-map-gl';
+
+import { usePathname } from 'next/navigation';
 
 import { StoryStepMap } from '@/types/story';
 
-import { useMapImage } from '@/hooks/map';
+import { setMapEnable, useMapImage } from '@/hooks/map';
 import useStories from '@/hooks/stories/useStories';
 
 const GlobeMarkers = () => {
@@ -42,6 +44,20 @@ const GlobeMarkers = () => {
     url: `${process.env.NEXT_PUBLIC_BASE_PATH}/images/map/story-marker.png`,
   });
 
+  const pathname = usePathname();
+  const visibility = useMemo(
+    () => (!pathname.includes('stories') ? 'visible' : 'none'),
+    [pathname]
+  );
+
+  const { default: map } = useMap();
+
+  useEffect(() => {
+    if (!map) return;
+    const MAP = map.getMap();
+    setMapEnable(MAP, pathname.includes('globe'));
+  }, [pathname, map]);
+
   return (
     <Source id="story-markers" type="geojson" data={FeatureCollection}>
       <Layer
@@ -53,7 +69,7 @@ const GlobeMarkers = () => {
           'circle-radius': 12,
         }}
         layout={{
-          visibility: 'visible',
+          visibility,
         }}
       />
 
@@ -66,6 +82,7 @@ const GlobeMarkers = () => {
           'text-size': 12,
           'text-ignore-placement': true,
           'text-allow-overlap': true,
+          visibility,
         }}
         paint={{
           'text-color': '#003247',
@@ -83,6 +100,7 @@ const GlobeMarkers = () => {
           'icon-image': 'story-marker',
           'icon-ignore-placement': true,
           'icon-allow-overlap': true,
+          visibility,
         }}
       />
     </Source>
diff --git a/client/src/containers/map/markers/selected-stories-marker/index.tsx b/client/src/containers/map/markers/selected-stories-marker/index.tsx
index 3921e25..1d36aa6 100644
--- a/client/src/containers/map/markers/selected-stories-marker/index.tsx
+++ b/client/src/containers/map/markers/selected-stories-marker/index.tsx
@@ -6,7 +6,7 @@ import { useMap } from 'react-map-gl';
 
 import { useRouter } from 'next/navigation';
 
-import { useBreakpoint } from '@/hooks/screen-size';
+import { useIsMobile } from '@/hooks/screen-size';
 
 import Marker from '@/components/map/layers/marker';
 
@@ -18,8 +18,7 @@ type SelectedStoriesMarkerProps = {
 const SelectedStoriesMarker = ({ markers, onCloseMarker }: SelectedStoriesMarkerProps) => {
   const { push } = useRouter();
 
-  const breakpoint = useBreakpoint();
-  const isMobile = !breakpoint('sm');
+  const isMobile = useIsMobile();
   const { ['default']: map } = useMap();
 
   useEffect(() => {
diff --git a/client/src/containers/story/header.tsx b/client/src/containers/story/header.tsx
index 7467fbd..09601be 100644
--- a/client/src/containers/story/header.tsx
+++ b/client/src/containers/story/header.tsx
@@ -1,24 +1,20 @@
+import { useRef, useState } from 'react';
+
 import { useRouter } from 'next/navigation';
 
+import { useMotionValueEvent, useScroll } from 'framer-motion';
 import { useSetAtom } from 'jotai';
 import { ArrowLeft, FacebookIcon, LinkedinIcon, Share2, TwitterIcon, XIcon } from 'lucide-react';
-import {
-  motion,
-  useMotionValue,
-  useMotionValueEvent,
-  useScroll,
-  useTransform,
-} from 'framer-motion';
+
 import env from '@/env.mjs';
 
+import { cn } from '@/lib/classnames';
+
 import { layersAtom } from '@/store/map';
 
 import { Button } from '@/components/ui/button';
 import CategoryIcon from '@/components/ui/category-icon';
 import { Dialog, DialogContentHome, DialogTrigger } from '@/components/ui/dialog';
-import { cn } from '@/lib/classnames';
-import { use, useRef, useState } from 'react';
-import { c } from 'nuqs/dist/serializer-5da93b5e';
 
 const headerButtonClassName =
   'h-8 px-4 py-2 rounded-4xl sm:h-auto border border-gray-800 bg-gray-900 sm:px-5 sm:py-2.5 hover:bg-gray-800';
diff --git a/client/src/containers/story/steps/layouts/outro-step.tsx b/client/src/containers/story/steps/layouts/outro-step.tsx
index af06f0f..d2928d0 100644
--- a/client/src/containers/story/steps/layouts/outro-step.tsx
+++ b/client/src/containers/story/steps/layouts/outro-step.tsx
@@ -12,7 +12,7 @@ import { getImageSrc } from '@/lib/image-src';
 
 import { StepLayoutOutroStepComponent } from '@/types/generated/strapi.schemas';
 
-import { useBreakpoint } from '@/hooks/screen-size';
+import { useIsMobile } from '@/hooks/screen-size';
 
 import ScrollExplanation from '@/components/ui/scroll-explanation';
 
@@ -44,10 +44,9 @@ const OutroStepLayout = ({ step, showContent, disclaimer }: MediaStepLayoutProps
     smooth: 10000,
   });
 
-  const [show, setShow] = useState(false);
+  const [show, setShow] = useState(true);
 
-  const breakpoint = useBreakpoint();
-  const isMobile = !breakpoint('sm');
+  const isMobile = useIsMobile();
 
   useEffect(() => {
     if (!showContent) setShow(false);
@@ -59,8 +58,7 @@ const OutroStepLayout = ({ step, showContent, disclaimer }: MediaStepLayoutProps
       if (isMobile && v > 0.1) setShow(true);
     }
     if (show && v < 0.2) setShow(false);
-
-    if (v > 0.6) {
+    if (v > 0.7) {
       push('/globe');
     }
   });
@@ -83,13 +81,10 @@ const OutroStepLayout = ({ step, showContent, disclaimer }: MediaStepLayoutProps
   const categoryDisclaimer = disclaimer as Disclaimer[];
 
   return (
-    <div
-      ref={containerRef}
-      className="absolute flex h-[250vh] items-center sm:h-[300vh] sm:items-start"
-    >
+    <div ref={containerRef} className="absolute flex h-[300vh] items-end pt-[50vh] sm:items-start">
       <motion.div
         className={cn(
-          'sticky top-0 flex h-screen min-h-fit w-screen flex-col items-center justify-center opacity-0 sm:min-h-screen 2xl:px-12'
+          'sticky bottom-0 flex h-screen min-h-fit w-screen flex-col items-center justify-center opacity-0 sm:top-0 sm:min-h-screen 2xl:px-12'
         )}
         initial={{ opacity: 0 }}
         animate={{ opacity: showContent && show ? 1 : 0 }}
diff --git a/client/src/hooks/map/index.ts b/client/src/hooks/map/index.ts
index 142b718..ec4dd71 100644
--- a/client/src/hooks/map/index.ts
+++ b/client/src/hooks/map/index.ts
@@ -20,3 +20,34 @@ export function useMapImage({ url, name, sdf = false }: UseMapImageOptions) {
     }
   }, [map, url, name, sdf]);
 }
+
+const properties = [
+  'boxZoom',
+  'scrollZoom',
+  'dragPan',
+  'dragRotate',
+  'keyboard',
+  'doubleClickZoom',
+  'touchZoomRotate',
+];
+
+export const setMapEnable = (map: mapboxgl.Map, enabled: boolean) => {
+  if (!map) return;
+
+  if (enabled) {
+    properties.forEach((prop) => {
+      // @ts-expect-error - TS doesn't know about these properties
+      map[prop].enable();
+    });
+    const canvas = map.getCanvas();
+    if (canvas) {
+      canvas.style.cursor = 'pointer';
+    }
+  } else {
+    properties.forEach((prop) => {
+      // @ts-expect-error - TS doesn't know about these properties
+      map[prop].disable();
+    });
+    map.getCanvas().style.cursor = 'default';
+  }
+};
diff --git a/client/src/hooks/screen-size/index.ts b/client/src/hooks/screen-size/index.ts
index 0323129..d1c73fc 100644
--- a/client/src/hooks/screen-size/index.ts
+++ b/client/src/hooks/screen-size/index.ts
@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
 import resolveConfig from 'tailwindcss/resolveConfig';
 
 import tailwindConfig from '@/../tailwind.config';
+
 const { theme } = resolveConfig(tailwindConfig);
 
 const getThemeSize = (size: string) => {
@@ -18,28 +19,25 @@ const getThemeSize = (size: string) => {
   return 1;
 };
 
-export const useBreakpoint = () => {
-  const [width, setWidth] = useState(0);
+export function useMediaQuery(query: string) {
+  const [matches, setMatches] = useState(false);
 
   useEffect(() => {
-    if (typeof window === 'undefined') {
-      return;
-    }
+    const media = window.matchMedia(query);
 
-    setWidth(window.innerWidth);
-
-    const handleResize = () => {
-      setWidth(window.innerWidth);
-    };
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
 
-    window.addEventListener('resize', handleResize);
+    const listener = () => setMatches(media.matches);
+    media.addEventListener('change', listener);
+    return () => window.removeEventListener('change', listener);
+  }, [matches, query]);
 
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
+  return matches;
+}
 
-  return (screenSize: string) => {
-    return width >= getThemeSize(screenSize);
-  };
+export const useIsMobile = () => {
+  const smSize = getThemeSize('sm');
+  return useMediaQuery(`(max-width: ${smSize}px)`);
 };
diff --git a/client/src/lib/stories/index.ts b/client/src/lib/stories/index.ts
index 9b2b888..ce3c48f 100644
--- a/client/src/lib/stories/index.ts
+++ b/client/src/lib/stories/index.ts
@@ -1,3 +1,5 @@
+import { MapRef } from 'react-map-gl';
+
 import { GetCategoriesParams } from '@/types/generated/strapi.schemas';
 
 export const getStoriesParams = (params?: {
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index 7ec0750..cf61885 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -84,8 +84,8 @@ module.exports = {
           '100%': { opacity: 1, transform: 'translateY(20px)' },
         },
         'fade-up': {
-          '0%': { opacity: 1, transform: 'translateY(0)' },
-          '100%': { opacity: 0, transform: 'translateY(-20px)' },
+          '0%': { opacity: 1, transform: 'translateY(20px)' },
+          '100%': { opacity: 0, transform: 'translateY(0px)' },
         },
       },
       animation: {