Add katex error tooltip and fix tooltip overflows

Author: Abbas-Askari

packages/markups/src/katex/KatexErrorBoundary.js

@@ -1,32 +1,30 @@
-// import colors from '@rocket.chat/fuselage-tokens/colors.json';
 import React, { useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import PropTypes from 'prop-types';
-import { Box } from '@embeddedchat/ui-elements';
+import { Box, Tooltip, useTheme } from '@embeddedchat/ui-elements';
 import { css } from '@emotion/react';
 
-// const Fallback = styled('span')`
-// 	text-decoration: underline;
-// 	text-decoration-color: ${colors.r400};
-// `;
-
 const KatexErrorBoundary = ({ children, code }) => {
   const [error, setError] = useState(null);
+  const { theme } = useTheme();
   return (
     <ErrorBoundary
-      //   children={children}
       onError={setError}
       fallback={
-        <Box
-          is="span"
-          title={error?.message}
-          css={css`
-            text-decoration: underline;
-            text-decoration-color: red;
-          `}
+        <Tooltip
+          text={error?.message}
+          position="top"
         >
-          <span>{code}</span>
-        </Box>
+          <Box
+            is="span"
+            css={css`
+              text-decoration: underline;
+              text-decoration-color: ${theme.colors.destructive};
+            `}
+          >
+            <span>{code}</span>
+          </Box>
+        </Tooltip>
       }
     >
       {children}

packages/react/src/views/AttachmentHandler/AudioAttachment.js

@@ -32,7 +32,7 @@ const AudioAttachment = ({
       <Box
         css={[
           css`
-            line-height: 0;
+            line-height: 0.75rem;
             border-radius: inherit;
             padding: 0.5rem;
           `,

packages/react/src/views/AttachmentHandler/ImageAttachment.js

@@ -42,7 +42,7 @@ const ImageAttachment = ({
           css`
             cursor: pointer;
             border-radius: inherit;
-            line-height: 0;
+            line-height: 0.75rem;
             padding: 0.5rem;
           `,
           (type ? variantStyles.pinnedContainer : '') ||

packages/react/src/views/AttachmentHandler/VideoAttachment.js

@@ -42,7 +42,7 @@ const VideoAttachment = ({
       <Box
         css={[
           css`
-            line-height: 0;
+            line-height: 0.75rem;
             border-radius: inherit;
             padding: 0.5rem;
             @media (max-width: 450px) {

packages/ui-elements/src/components/Tooltip/Tooltip.styles.js

@@ -14,9 +14,10 @@ const getTooltipStyles = (theme, position) => {
       z-index: ${theme.zIndex?.tooltip || 1400};
       font-size: 12.5px;
       font-weight: 500;
-      white-space: nowrap;
+      max-width: 160px;
+      width: max-content;
       font-family: sans-serif;
-      top: ${position === 'top' ? 'calc(-100% - 20px)' : 'calc(100% + 10px)'};
+      ${position === 'top' ? 'bottom: calc(100% + 10px)' : 'top: calc(100% + 10px)'};
     `,
     tooltipArrow: css`
       content: '';