forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Make ALF prompt scrollable for accessibility (#3150)
* make alf prompt scrollable
* padding
+15
-5
+15
-5
src/components/Prompt.tsx
+15
-5
src/components/Prompt.tsx
···
3
3
import {msg} from '@lingui/macro'
4
4
import {useLingui} from '@lingui/react'
5
5
6
-
import {useTheme, atoms as a} from '#/alf'
6
+
import {useTheme, atoms as a, useBreakpoints} from '#/alf'
7
7
import {Text} from '#/components/Typography'
8
8
import {Button} from '#/components/Button'
9
9
···
25
25
}: React.PropsWithChildren<{
26
26
control: Dialog.DialogOuterProps['control']
27
27
}>) {
28
+
const {gtMobile} = useBreakpoints()
28
29
const titleId = React.useId()
29
30
const descriptionId = React.useId()
30
31
···
38
39
<Context.Provider value={context}>
39
40
<Dialog.Handle />
40
41
41
-
<Dialog.Inner
42
+
<Dialog.ScrollableInner
42
43
accessibilityLabelledBy={titleId}
43
44
accessibilityDescribedBy={descriptionId}
44
-
style={[{width: 'auto', maxWidth: 400}]}>
45
+
style={[gtMobile ? {width: 'auto', maxWidth: 400} : a.w_full]}>
45
46
{children}
46
-
</Dialog.Inner>
47
+
</Dialog.ScrollableInner>
47
48
</Context.Provider>
48
49
</Dialog.Outer>
49
50
)
···
71
72
}
72
73
73
74
export function Actions({children}: React.PropsWithChildren<{}>) {
75
+
const {gtMobile} = useBreakpoints()
76
+
74
77
return (
75
-
<View style={[a.w_full, a.flex_row, a.gap_sm, a.justify_end]}>
78
+
<View
79
+
style={[
80
+
a.w_full,
81
+
a.flex_row,
82
+
a.gap_sm,
83
+
a.justify_end,
84
+
gtMobile && [a.pb_4xl],
85
+
]}>
76
86
{children}
77
87
</View>
78
88
)