portal in buttons so they move with swipe

src/screens/Messages/components/ChatListItem.tsx

@@ -42,11 +42,14 @@ import {Trash_Stroke2_Corner0_Rounded} from '#/components/icons/Trash'
 import {Link} from '#/components/Link'
 import {useMenuControl} from '#/components/Menu'
 import {PostAlerts} from '#/components/moderation/PostAlerts'
+import {createPortalGroup} from '#/components/Portal'
 import {Text} from '#/components/Typography'
 import {useSimpleVerificationState} from '#/components/verification'
 import {VerificationCheck} from '#/components/verification/VerificationCheck'
 import type * as bsky from '#/types/bsky'
 
+export const ChatListItemPortal = createPortalGroup()
+
 export let ChatListItem = ({
   convo,
   showMenu = true,
@@ -331,6 +334,7 @@ function ChatListItemReady({
   const hasUnread = convo.unreadCount > 0 && !isDeletedAccount
 
   return (
+    <ChatListItemPortal.Provider>
       <GestureActionView actions={actions}>
         <View
           onMouseEnter={onMouseEnter}
@@ -365,8 +369,14 @@ function ChatListItemReady({
             accessibilityActions={
               isNative
                 ? [
-                  {name: 'magicTap', label: _(msg`Open conversation options`)},
-                  {name: 'longpress', label: _(msg`Open conversation options`)},
+                    {
+                      name: 'magicTap',
+                      label: _(msg`Open conversation options`),
+                    },
+                    {
+                      name: 'longpress',
+                      label: _(msg`Open conversation options`),
+                    },
                   ]
                 : undefined
             }
@@ -450,7 +460,11 @@ function ChatListItemReady({
                   {!isDeletedAccount && (
                     <Text
                       numberOfLines={1}
-                    style={[a.text_sm, t.atoms.text_contrast_medium, a.pb_xs]}>
+                      style={[
+                        a.text_sm,
+                        t.atoms.text_contrast_medium,
+                        a.pb_xs,
+                      ]}>
                       @{profile.handle}
                     </Text>
                   )}
@@ -497,6 +511,8 @@ function ChatListItemReady({
             )}
           </Link>
 
+          <ChatListItemPortal.Outlet />
+
           {showMenu && (
             <ConvoMenu
               convo={convo}
@@ -513,7 +529,8 @@ function ChatListItemReady({
                 a.justify_center,
                 {
                   right: tokens.space.lg,
-                opacity: !gtMobile || showActions || menuControl.isOpen ? 1 : 0,
+                  opacity:
+                    !gtMobile || showActions || menuControl.isOpen ? 1 : 0,
                 },
               ]}
               latestReportableMessage={latestReportableMessage}
@@ -526,5 +543,6 @@ function ChatListItemReady({
           />
         </View>
       </GestureActionView>
+    </ChatListItemPortal.Provider>
   )
 }

src/screens/Messages/components/RequestListItem.tsx

@@ -7,7 +7,7 @@ import {useSession} from '#/state/session'
 import {atoms as a, tokens} from '#/alf'
 import {KnownFollowers} from '#/components/KnownFollowers'
 import {Text} from '#/components/Typography'
-import {ChatListItem} from './ChatListItem'
+import {ChatListItem, ChatListItemPortal} from './ChatListItem'
 import {AcceptChatButton, DeleteChatButton, RejectMenu} from './RequestButtons'
 
 export function RequestListItem({convo}: {convo: ChatBskyConvoDefs.ConvoView}) {
@@ -42,7 +42,8 @@ export function RequestListItem({convo}: {convo: ChatBskyConvoDefs.ConvoView}) {
             <Trans comment="Accept a chat request">Accept Request</Trans>
           </Text>
         </View>
-      </ChatListItem>
+        {/* then, this gets absolutely positioned on top of the spacer */}
+        <ChatListItemPortal.Portal>
           <View
             style={[
               a.absolute,
@@ -73,6 +74,8 @@ export function RequestListItem({convo}: {convo: ChatBskyConvoDefs.ConvoView}) {
               </>
             )}
           </View>
+        </ChatListItemPortal.Portal>
+      </ChatListItem>
     </View>
   )
 }