fix(wallet-mobile): address details styling

apps/wallet-mobile/src/components/Clipboard/ClipboardProvider.tsx

@@ -25,11 +25,16 @@ export const ClipboardProvider = ({children}: Props) => {
   const [copied, setCopied] = React.useState<CopiedState | null>(null)
   const {height, width} = useWindowDimensions()
   const copy: ClipboardContext['copy'] = ({text, feedback = 'Copied', event}) => {
+    const baseLocationX = (event?.nativeEvent.pageX ?? width * 0.5) - feedback.length * 4
+    const maxX = width - 20 - feedback.length * 8
+    const minX = 20 + feedback.length * 8
+    const locationX = Math.min(Math.max(baseLocationX, minX), maxX)
+
     Clipboard.setString(text)
     setCopied({
       feedback,
       locationY: event ? event.nativeEvent.pageY - 50 : height * 0.85,
-      locationX: (event?.nativeEvent.pageX ?? width * 0.5) - feedback.length * 4,
+      locationX,
     })
     setTimeout(() => setCopied(null), FEEDBACK_TIMEOUT)
   }

apps/wallet-mobile/src/components/CopyButton.tsx

@@ -1,6 +1,6 @@
 import {useTheme} from '@yoroi/theme'
 import React from 'react'
-import {StyleProp, ViewStyle} from 'react-native'
+import {StyleProp, View, ViewStyle} from 'react-native'
 
 import {Icon} from '../components/Icon'
 import {Button, ButtonType} from './Button/Button'
@@ -15,22 +15,24 @@ type CopyButtonProps = {
   message?: string
 }
 
-export const CopyButton = ({title, value, onCopy, message}: CopyButtonProps) => {
+export const CopyButton = ({title, value, onCopy, message, style}: CopyButtonProps) => {
   const {isCopying, copy} = useCopy()
   const {atoms} = useTheme()
 
   return (
-    <Button
-      type={ButtonType.SecondaryText}
-      fontOverride={atoms.body_1_lg_regular}
-      style={{...atoms.p_0, ...atoms.justify_between}}
-      title={title}
-      icon={isCopying ? Icon.CopySuccess : Icon.Copy}
-      rightIcon
-      onPress={(event) => {
-        copy({text: value, feedback: message, event})
-        onCopy?.()
-      }}
-    />
+    <View style={style}>
+      <Button
+        type={ButtonType.SecondaryText}
+        fontOverride={atoms.body_1_lg_regular}
+        style={{...atoms.p_0, ...atoms.justify_between, flexGrow: 0}}
+        title={title}
+        icon={isCopying ? Icon.CopySuccess : Icon.Copy}
+        rightIcon
+        onPress={(event) => {
+          copy({text: value, feedback: message, event})
+          onCopy?.()
+        }}
+      />
+    </View>
   )
 }