qa feedback

Author: ted-palmer

packages/ui/src/components/common/Modal.tsx

@@ -29,7 +29,7 @@ export const Modal: FC<
     ModalProps &
     Pick<
       ComponentPropsWithoutRef<typeof AnimatedContent>,
-      'onPointerDownOutside'
+      'onPointerDownOutside' | 'onOpenAutoFocus'
     >
 > = ({
   trigger,
@@ -68,6 +68,7 @@ export const Modal: FC<
                 }}
                 disableAnimation={disableAnimation}
                 onPointerDownOutside={props.onPointerDownOutside}
+                onOpenAutoFocus={props.onOpenAutoFocus}
               >
                 {showCloseButton ? (
                   <DialogClose

packages/ui/src/components/common/TokenSelector/MobileChainSelector.tsx

@@ -426,6 +426,7 @@ const MobileChainRow: FC<MobileChainRowProps> = ({
           size="none"
           css={{
             py: '3',
+            px: '2',
             display: 'flex',
             alignItems: 'center',
             gap: '2',
@@ -465,6 +466,7 @@ const MobileChainRow: FC<MobileChainRowProps> = ({
           onTouchMove={handleTouchMove}
           css={{
             py: '3',
+            px: '2',
             display: 'flex',
             alignItems: 'center',
             gap: '2',

packages/ui/src/components/common/TokenSelector/TokenSelector.tsx

@@ -6,7 +6,14 @@ import {
   useMemo,
   useState
 } from 'react'
-import { Flex, Text, Input, Box, Button } from '../../primitives/index.js'
+import {
+  Flex,
+  Text,
+  Input,
+  Box,
+  Button,
+  ChainIcon
+} from '../../primitives/index.js'
 import { Modal } from '../Modal.js'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {
@@ -509,6 +516,11 @@ const TokenSelector: FC<TokenSelectorProps> = ({
           onOpenChange={onOpenChange}
           showCloseButton={isDesktop}
           disableAnimation={!isDesktop}
+          onOpenAutoFocus={(e) => {
+            if (!isDesktop) {
+              e.preventDefault()
+            }
+          }}
           trigger={trigger}
           css={{
             p: '4',
@@ -705,6 +717,25 @@ const TokenSelector: FC<TokenSelectorProps> = ({
                         context={context}
                       />
                     ) : null}
+
+                    {/* Selected Chain Header - Only show on mobile when specific chain is selected */}
+                    {!isDesktop && chainFilter.id !== undefined ? (
+                      <Flex
+                        align="center"
+                        css={{
+                          gap: '2',
+                          pb: '1',
+                          width: '100%'
+                        }}
+                      >
+                        <Text style="subtitle2" color="subtle">
+                          Tokens on{' '}
+                          {('displayName' in chainFilter &&
+                            chainFilter.displayName) ||
+                            chainFilter.name}
+                        </Text>
+                      </Flex>
+                    ) : null}
                   </Flex>
 
                   {/* Token Lists Section  */}
@@ -715,7 +746,8 @@ const TokenSelector: FC<TokenSelectorProps> = ({
                       flex: 1,
                       overflowY: 'auto',
                       gap: '3',
-                      pt: '2',
+                      pt:
+                        !isDesktop && chainFilter.id !== undefined ? '0' : '2',
                       scrollbarColor: 'var(--relay-colors-gray5) transparent'
                     }}
                   >