From 6554a8239e561e28834f29d05a064f3504015dfb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Prod=27homme?=
 <clementprdhomme@users.noreply.github.com>
Date: Wed, 3 Apr 2024 09:33:08 +0200
Subject: [PATCH] Address an issue with the scroll behaviour and close button
 of the detailed view (#859)

---
 frontend/components/map/component.tsx         |  4 ++--
 .../containers/project-details/component.tsx  | 24 +++++++++----------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/frontend/components/map/component.tsx b/frontend/components/map/component.tsx
index bc2c3644a..b93f3a1a0 100644
--- a/frontend/components/map/component.tsx
+++ b/frontend/components/map/component.tsx
@@ -20,10 +20,10 @@ export const Map: FC<MapProps> = ({
   onMapLoad,
   onMapViewportChange,
   dragPan,
-  dragRotate,
+  dragRotate = false,
   scrollZoom,
   touchZoom,
-  touchRotate,
+  touchRotate = false,
   doubleClickZoom,
   width = '100%',
   height = '100%',
diff --git a/frontend/containers/project-details/component.tsx b/frontend/containers/project-details/component.tsx
index a721a4a57..b4f98dd43 100644
--- a/frontend/containers/project-details/component.tsx
+++ b/frontend/containers/project-details/component.tsx
@@ -101,19 +101,19 @@ export const ProjectDetails: FC<ProjectDetailsProps> = ({
 
   return (
     <div className={className}>
+      <Button
+        size="smallest"
+        theme="naked"
+        className="sticky z-20 ml-auto mr-4 text-gray-400 pointer-events-auto top-4 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-dark"
+        aria-label={intl.formatMessage({
+          defaultMessage: 'Close project details card',
+          id: 'hmK5Jb',
+        })}
+        onClick={onClose}
+      >
+        <XIcon className="w-6 h-6" aria-hidden={true} />
+      </Button>
       <div className="absolute top-0 right-0 z-20 w-full h-full overflow-hidden pointer-events-none">
-        <Button
-          size="smallest"
-          theme="naked"
-          className="absolute text-gray-400 pointer-events-auto right-4 top-4 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-dark"
-          aria-label={intl.formatMessage({
-            defaultMessage: 'Close project details card',
-            id: 'hmK5Jb',
-          })}
-          onClick={onClose}
-        >
-          <XIcon className="w-6 h-6" aria-hidden={true} />
-        </Button>
         {project.looking_for_funding && (
           <span className="absolute px-10 py-2 text-xs text-center origin-top-left rotate-45 w-60 -top-10 -right-28 bg-green-dark text-green-light">
             <FormattedMessage defaultMessage="Looking for funding" id="Czc5vB" />