tweak who can reply dialog (#8573)

src/components/WhoCanReply.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {Fragment, useMemo} from 'react'
 import {
   Keyboard,
   Platform,
@@ -22,8 +22,8 @@ import {
   type ThreadgateAllowUISetting,
   threadgateViewToAllowUISetting,
 } from '#/state/queries/threadgate'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, useTheme, web} from '#/alf'
-import {Button} from '#/components/Button'
+import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {useDialogControl} from '#/components/Dialog'
 import {
@@ -61,7 +61,7 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
     ) && post.record.reply?.root
       ? post.record.reply.root.uri
       : post.uri
-  const settings = React.useMemo(() => {
+  const settings = useMemo(() => {
     return threadgateViewToAllowUISetting(post.threadgate)
   }, [post.threadgate])
 
@@ -178,12 +178,13 @@ function WhoCanReplyDialog({
   embeddingDisabled: boolean
 }) {
   const {_} = useLingui()
+
   return (
-    <Dialog.Outer control={control}>
+    <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
       <Dialog.Handle />
       <Dialog.ScrollableInner
         label={_(msg`Dialog: adjust who can interact with this post`)}
-        style={[{width: 'auto', maxWidth: 400, minWidth: 200}]}>
+        style={web({maxWidth: 400})}>
         <View style={[a.gap_sm]}>
           <Text style={[a.font_bold, a.text_xl, a.pb_sm]}>
             <Trans>Who can interact with this post?</Trans>
@@ -194,6 +195,20 @@ function WhoCanReplyDialog({
             embeddingDisabled={embeddingDisabled}
           />
         </View>
+        {isNative && (
+          <Button
+            label={_(msg`Close`)}
+            onPress={() => control.close()}
+            size="small"
+            variant="solid"
+            color="secondary"
+            style={[a.mt_5xl]}>
+            <ButtonText>
+              <Trans>Close</Trans>
+            </ButtonText>
+          </Button>
+        )}
+        <Dialog.Close />
       </Dialog.ScrollableInner>
     </Dialog.Outer>
   )
@@ -232,10 +247,10 @@ function Rules({
           <Trans>
             Only{' '}
             {settings.map((rule, i) => (
-              <React.Fragment key={`rule-${i}`}>
+              <Fragment key={`rule-${i}`}>
                 <Rule rule={rule} post={post} lists={post.threadgate!.lists} />
                 <Separator i={i} length={settings.length} />
-              </React.Fragment>
+              </Fragment>
             ))}{' '}
             can reply.
           </Trans>