Add tooltipProperties with MaxWidth to prevent tooltip truncation

Co-authored-by: anupriya13 <[email protected]>

Author: Copilot

NewArch/src/components/Badge.tsx

@@ -31,7 +31,8 @@ export function Badge(props: {
   return (
     <View
       style={[styles.badgeContainer, {backgroundColor: props.badgeColor}]}
-      tooltip={props.description}>
+      tooltip={props.description}
+      tooltipProperties={{MaxWidth: 500}}>
       <Text style={[styles.badgeText, {color: props.textColor}]}>
         {props.badgeTitle}
       </Text>

NewArch/src/components/Controls.tsx

@@ -28,6 +28,7 @@ function Hyperlink({url, text}: HyperlinkProps): JSX.Element {
   return (
     <Pressable
       tooltip={url}
+      tooltipProperties={{MaxWidth: 500}}
       accessibilityRole="link"
       accessibilityLabel={displayText}
       onPress={() => Linking.openURL(url)}

NewArch/src/components/CopyToClipboard.tsx

@@ -45,6 +45,7 @@ const CopyToClipboardButton = React.forwardRef<any, CopyToClipboardButtonProps>(
       accessibilityRole="button"
       accessibilityLabel={helpText}
       tooltip={helpText}
+      tooltipProperties={{MaxWidth: 500}}
       style={styles.background}
       onPress={() => {
         Clipboard.setString(content);

NewArch/src/components/PageScroller.tsx

@@ -23,6 +23,7 @@ const PagingButton = ({left, onPress}: PagingButtonProps) => {
       accessibilityRole="button"
       accessibilityLabel={tooltip}
       tooltip={tooltip}
+      tooltipProperties={{MaxWidth: 500}}
       onPress={() => onPress()}
       onHoverIn={() => setHover(true)}
       onHoverOut={() => setHover(false)}

NewArch/src/components/ScreenWrapper.tsx

@@ -82,6 +82,7 @@ export function ScreenWrapper({
             accessibilityRole="button"
             accessibilityLabel="Navigation menu"
             tooltip={'Expand navigation menu'}
+            tooltipProperties={{MaxWidth: 500}}
             // requires react-native-gesture-handler to be imported in order to pass testing.
             // blocked by #125
             //accessibilityState={{expanded: useIsDrawerOpen()}}

src/components/Badge.tsx

@@ -31,7 +31,8 @@ export function Badge(props: {
   return (
     <View
       style={[styles.badgeContainer, {backgroundColor: props.badgeColor}]}
-      tooltip={props.description}>
+      tooltip={props.description}
+      tooltipProperties={{MaxWidth: 500}}>
       <Text style={[styles.badgeText, {color: props.textColor}]}>
         {props.badgeTitle}
       </Text>

src/components/CopyToClipboard.tsx

@@ -44,6 +44,7 @@ const CopyToClipboardButton = ({content}: CopyToClipboardButtonProps) => {
       accessibilityRole="button"
       accessibilityLabel={helpText}
       tooltip={helpText}
+      tooltipProperties={{MaxWidth: 500}}
       style={styles.background}
       onPress={() => {
         Clipboard.setString(content);

src/components/PageScroller.tsx

@@ -24,6 +24,7 @@ const PagingButton = ({left, onPress}: PagingButtonProps) => {
       accessibilityRole="button"
       accessibilityLabel={tooltip}
       tooltip={tooltip}
+      tooltipProperties={{MaxWidth: 500}}
       onPress={() => onPress()}
       onHoverIn={() => setHover(true)}
       onHoverOut={() => setHover(false)}>

src/components/ScreenWrapper.tsx

@@ -80,7 +80,7 @@ export function ScreenWrapper({
           <TouchableHighlight
             accessibilityRole="button"
             accessibilityLabel="Navigation bar hamburger icon"
-            {...{tooltip: 'Expand Menu'}}
+            {...{tooltip: 'Expand Menu', tooltipProperties: {MaxWidth: 500}}}
             // requires react-native-gesture-handler to be imported in order to pass testing.
             // blocked by #125
             //accessibilityState={{expanded: useIsDrawerOpen()}}