fix: improve mobile styles for the subscription dialog

src/components/FullscreenDialog/FullscreenDialog.tsx

@@ -50,6 +50,11 @@ const MainContentContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
+  /* safe center will center for large screens, but still show a scroll bar for smaller screens */
+  justify-content: safe center;
+
+  overflow: auto;
+  height: 100%;
 
   padding: 24px 0;
   width: 430px;
@@ -64,6 +69,7 @@ const MainContentContainer = styled.div`
 
 const FullscreenDialogContainer = styled.div`
   position: fixed;
+
   top: 0;
   left: 0;
   width: 100vw;

src/components/NewsletterSubscriptionForm/NewsletterSubscriptionForm.tsx

@@ -128,6 +128,8 @@ const EmailSubscribeForm = styled.form<{
   gap: 16px;
   width: 100%;
   margin-top: 50px;
+
+  margin-bottom: 30px;
 `
 
 const StyledTextField = styled(TextField)`

src/containers/NewsletterSubscriptionDialog/NewsletterSubscriptionDialog.tsx

@@ -112,5 +112,6 @@ const LogosIconAndTitleContainer = styled.div`
   display: flex;
   align-items: center;
   gap: 16px;
-  margin-bottom: 16px;
+
+  margin: 16px 0;
 `