From 2e80fa3dac4d869640f5bce8ad43eb401c8e3141 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Fri, 9 May 2025 15:58:12 -0500
Subject: [PATCH] Fix email dialog width on large phones (#8350)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix email dialog width on large phones

* Do it Right™
---
 src/components/Prompt.tsx                    | 11 ++++++++---
 src/components/dialogs/EmailDialog/index.tsx |  3 ++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/Prompt.tsx b/src/components/Prompt.tsx
index f21c98ff86..2ff0c7ccc3 100644
--- a/src/components/Prompt.tsx
+++ b/src/components/Prompt.tsx
@@ -3,7 +3,13 @@ import {type GestureResponderEvent, View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {atoms as a, useBreakpoints, useTheme, type ViewStyleProp} from '#/alf'
+import {
+  atoms as a,
+  useBreakpoints,
+  useTheme,
+  type ViewStyleProp,
+  web,
+} from '#/alf'
 import {Button, type ButtonColor, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {Text} from '#/components/Typography'
@@ -32,7 +38,6 @@ export function Outer({
   testID?: string
   nativeOptions?: Omit<BottomSheetViewProps, 'children'>
 }>) {
-  const {gtMobile} = useBreakpoints()
   const titleId = React.useId()
   const descriptionId = React.useId()
 
@@ -52,7 +57,7 @@ export function Outer({
         <Dialog.ScrollableInner
           accessibilityLabelledBy={titleId}
           accessibilityDescribedBy={descriptionId}
-          style={[gtMobile ? {width: 400} : a.w_full]}>
+          style={web({maxWidth: 400})}>
           {children}
         </Dialog.ScrollableInner>
       </Context.Provider>
diff --git a/src/components/dialogs/EmailDialog/index.tsx b/src/components/dialogs/EmailDialog/index.tsx
index 4bac7295a5..3cebbdfc7a 100644
--- a/src/components/dialogs/EmailDialog/index.tsx
+++ b/src/components/dialogs/EmailDialog/index.tsx
@@ -2,6 +2,7 @@ import {useCallback, useState} from 'react'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {web} from '#/alf'
 import * as Dialog from '#/components/Dialog'
 import {type StatefulControl} from '#/components/dialogs/Context'
 import {useGlobalDialogsControlContext} from '#/components/dialogs/Context'
@@ -38,7 +39,7 @@ export function EmailDialog() {
 
       <Dialog.ScrollableInner
         label={_(msg`Make adjustments to email settings for your account`)}
-        style={[{maxWidth: 400}]}>
+        style={web({maxWidth: 400})}>
         <Inner control={emailDialogControl} />
         <Dialog.Close />
       </Dialog.ScrollableInner>