From 88d21070f4887a8250d3036d01803bd266aace36 Mon Sep 17 00:00:00 2001
From: Ruxandra Machedon <ruxandra@techmatters.org>
Date: Wed, 28 Feb 2024 16:40:26 -0500
Subject: [PATCH] fix: use anchor for map location dialog, compensate for
 padding issue

---
 .../StoryMapForm/MapLocationDialog.js         | 105 +++++++++---------
 1 file changed, 53 insertions(+), 52 deletions(-)

diff --git a/src/storyMap/components/StoryMapForm/MapLocationDialog.js b/src/storyMap/components/StoryMapForm/MapLocationDialog.js
index a53300436..2577c476e 100644
--- a/src/storyMap/components/StoryMapForm/MapLocationDialog.js
+++ b/src/storyMap/components/StoryMapForm/MapLocationDialog.js
@@ -56,57 +56,59 @@ const BearingIcon = () => {
 const SetMapHelperText = () => {
   const { t } = useTranslation();
   return (
-    <Stack spacing={3}>
-      <Box>
-        <Trans i18nKey="storyMap.form_location_helper_text_step_1">
-          <Typography gutterBottom variant="h3">
-            Title
-          </Typography>
-          <Typography gutterBottom>Paragraph 1</Typography>
-          <img
-            src="/storyMap/set-map-step-1.png"
-            alt={t('storyMap.form_location_helper_text_step_1_image_alt')}
-          />
-        </Trans>
-      </Box>
-      <Box>
-        <Trans i18nKey="storyMap.form_location_helper_text_step_2">
-          <Typography gutterBottom variant="h3">
-            Title
-          </Typography>
-          <Typography gutterBottom sx={{ mb: 2 }}>
-            Paragraph 1
-          </Typography>
-          <Typography gutterBottom>
-            Content
-            <BearingIcon />
-            content
-            <BearingIcon />
-            content
-          </Typography>
-          <img
-            src="/storyMap/set-map-step-2-1.png"
-            alt={t('storyMap.form_location_helper_text_step_2_1_image_alt')}
-          />
-          <img
-            src="/storyMap/set-map-step-2-2.png"
-            alt={t('storyMap.form_location_helper_text_step_2_2_image_alt')}
-          />
-        </Trans>
-      </Box>
-      <Box>
-        <Trans i18nKey="storyMap.form_location_helper_text_step_3">
-          <Typography gutterBottom variant="h3">
-            Title
-          </Typography>
-          <Typography gutterBottom>Paragraph 1</Typography>
-          <img
-            src={t('storyMap.form_location_helper_text_step_3_image_src')}
-            alt={t('storyMap.form_location_helper_text_step_3_image_alt')}
-          />
-        </Trans>
-      </Box>
-    </Stack>
+    <DialogContent>
+      <Stack spacing={3}>
+        <Box>
+          <Trans i18nKey="storyMap.form_location_helper_text_step_1">
+            <Typography gutterBottom variant="h3">
+              Title
+            </Typography>
+            <Typography gutterBottom>Paragraph 1</Typography>
+            <img
+              src="/storyMap/set-map-step-1.png"
+              alt={t('storyMap.form_location_helper_text_step_1_image_alt')}
+            />
+          </Trans>
+        </Box>
+        <Box>
+          <Trans i18nKey="storyMap.form_location_helper_text_step_2">
+            <Typography gutterBottom variant="h3">
+              Title
+            </Typography>
+            <Typography gutterBottom sx={{ mb: 2 }}>
+              Paragraph 1
+            </Typography>
+            <Typography gutterBottom>
+              Content
+              <BearingIcon />
+              content
+              <BearingIcon />
+              content
+            </Typography>
+            <img
+              src="/storyMap/set-map-step-2-1.png"
+              alt={t('storyMap.form_location_helper_text_step_2_1_image_alt')}
+            />
+            <img
+              src="/storyMap/set-map-step-2-2.png"
+              alt={t('storyMap.form_location_helper_text_step_2_2_image_alt')}
+            />
+          </Trans>
+        </Box>
+        <Box>
+          <Trans i18nKey="storyMap.form_location_helper_text_step_3">
+            <Typography gutterBottom variant="h3">
+              Title
+            </Typography>
+            <Typography gutterBottom>Paragraph 1</Typography>
+            <img
+              src={t('storyMap.form_location_helper_text_step_3_image_src')}
+              alt={t('storyMap.form_location_helper_text_step_3_image_alt')}
+            />
+          </Trans>
+        </Box>
+      </Stack>
+    </DialogContent>
   );
 };
 
@@ -226,7 +228,6 @@ const MapLocationDialog = props => {
           <DialogContent sx={{ pb: 0 }}>
             <HelperText
               showLabel
-              useAnchor={false}
               maxWidth={586}
               label={t('storyMap.form_location_dialog_helper_text_label')}
               Component={SetMapHelperText}