fix: Tooltip wrapping

Author: alexcarpenter

packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/saml/SamlMicrosoftConfigureSteps.tsx

@@ -512,17 +512,22 @@ const MicrosoftAttributeMappingTable = (): JSX.Element => (
                 <Tooltip.Trigger>
                   <Text
                     as='span'
+                    tabIndex={0}
                     sx={{
                       fontFamily: 'monospace',
                       display: 'block',
                       overflow: 'hidden',
                       textOverflow: 'ellipsis',
                       whiteSpace: 'nowrap',
+                      outline: 'none',
                     }}
                     localizationKey={claimNameKey}
                   />
                 </Tooltip.Trigger>
-                <Tooltip.Content text={claimNameKey} />
+                <Tooltip.Content
+                  text={claimNameKey}
+                  textSx={{ overflowWrap: 'anywhere' }}
+                />
               </Tooltip.Root>
             </Td>
             <Td>

packages/ui/src/elements/Tooltip.tsx

@@ -190,8 +190,9 @@ const Content = React.forwardRef<
   React.HTMLProps<HTMLDivElement> & {
     text: string | LocalizationKey;
     sx?: ThemableCssProp;
+    textSx?: ThemableCssProp;
   }
->(function TooltipContent({ style, text, sx, ...props }, propRef) {
+>(function TooltipContent({ style, text, sx, textSx, ...props }, propRef) {
   const context = useTooltipContext();
   const ref = useMergeRefs([context.refs.setFloating, propRef]);
   const portalRoot = usePortalRoot();
@@ -232,6 +233,7 @@ const Content = React.forwardRef<
             localizationKey={text}
             variant='body'
             colorScheme='inherit'
+            sx={textSx}
           />
         </Box>
       </Box>