jollywhoppers.com
Bluesky app fork with some witchin' additions 💫
witchsky.app
bluesky
fork
client
Fix email dialog width on large phones (#8350)
* Fix email dialog width on large phones
* Do it Right™
authored by
Eric Bailey
and committed by
GitHub
2e80fa3d
ce2fffc8
+8
-3
src/components/Prompt.tsx
+8
-3
src/components/Prompt.tsx
···
3
3
import {msg} from '@lingui/macro'
4
4
import {useLingui} from '@lingui/react'
5
5
6
-
import {atoms as a, useBreakpoints, useTheme, type ViewStyleProp} from '#/alf'
6
+
import {
7
+
atoms as a,
8
+
useBreakpoints,
9
+
useTheme,
10
+
type ViewStyleProp,
11
+
web,
12
+
} from '#/alf'
7
13
import {Button, type ButtonColor, ButtonText} from '#/components/Button'
8
14
import * as Dialog from '#/components/Dialog'
9
15
import {Text} from '#/components/Typography'
···
32
38
testID?: string
33
39
nativeOptions?: Omit<BottomSheetViewProps, 'children'>
34
40
}>) {
35
-
const {gtMobile} = useBreakpoints()
36
41
const titleId = React.useId()
37
42
const descriptionId = React.useId()
38
43
···
52
57
<Dialog.ScrollableInner
53
58
accessibilityLabelledBy={titleId}
54
59
accessibilityDescribedBy={descriptionId}
55
-
style={[gtMobile ? {width: 400} : a.w_full]}>
60
+
style={web({maxWidth: 400})}>
56
61
{children}
57
62
</Dialog.ScrollableInner>
58
63
</Context.Provider>
+2
-1
src/components/dialogs/EmailDialog/index.tsx
+2
-1
src/components/dialogs/EmailDialog/index.tsx
···
2
2
import {msg} from '@lingui/macro'
3
3
import {useLingui} from '@lingui/react'
4
4
5
+
import {web} from '#/alf'
5
6
import * as Dialog from '#/components/Dialog'
6
7
import {type StatefulControl} from '#/components/dialogs/Context'
7
8
import {useGlobalDialogsControlContext} from '#/components/dialogs/Context'
···
38
39
39
40
<Dialog.ScrollableInner
40
41
label={_(msg`Make adjustments to email settings for your account`)}
41
-
style={[{maxWidth: 400}]}>
42
+
style={web({maxWidth: 400})}>
42
43
<Inner control={emailDialogControl} />
43
44
<Dialog.Close />
44
45
</Dialog.ScrollableInner>