fix: limit tooltip size in inbox

Signed-off-by: Alexander Onnikov <[email protected]>
hcengineering · Nov 23, 2024 · b1f6f9b · b1f6f9b
1 parent 1095493
commit b1f6f9b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/packages/ui/src/components/TooltipInstance.svelte b/packages/ui/src/components/TooltipInstance.svelte
@@ -45,6 +45,7 @@
     right: string
     width: string
     height: string
+    maxWidth: string
     transform: string
     visibility: string
     classList: string
@@ -57,6 +58,7 @@
     right: '',
     width: '',
     height: '',
+    maxWidth: '',
     transform: '',
     visibility: 'hidden',
     classList: ''
@@ -71,6 +73,7 @@
       right: '',
       width: '',
       height: '',
+      maxWidth: '',
       transform: '',
       visibility: 'hidden',
       classList: ''
@@ -86,6 +89,7 @@
       width: '',
       height: '',
       transform: '',
+      maxWidth: '',
       visibility: 'visible',
       classList: ''
     }
@@ -140,6 +144,9 @@
             else dir = 'top'
           } else dir = $tooltip.direction
 
+          const left = rectAnchor.x + rectAnchor.width / 2
+          const maxWidth = Math.min(left, docWidth - left)
+
           if (dir === 'right') {
             options.top = rectAnchor.y + rectAnchor.height / 2 + 'px'
             options.left = `calc(${rectAnchor.right}px + .75rem)`
@@ -151,10 +158,12 @@
           } else if (dir === 'bottom') {
             options.top = `calc(${rectAnchor.bottom}px + .5rem)`
             options.left = rectAnchor.x + rectAnchor.width / 2 + 'px'
+            options.maxWidth = `calc(${maxWidth * 2}px - 1.5rem)`
             options.transform = 'translateX(-50%)'
           } else if (dir === 'top') {
             options.bottom = `calc(${docHeight - rectAnchor.y}px + .75rem)`
             options.left = rectAnchor.x + rectAnchor.width / 2 + 'px'
+            options.maxWidth = `calc(${maxWidth * 2}px - 1.5rem)`
             options.transform = 'translateX(-50%)'
           }
         }
@@ -183,6 +192,7 @@
       right: '',
       width: '',
       height: '',
+      maxWidth: '',
       visibility: 'visible',
       transform: '',
       classList: ''
@@ -356,6 +366,7 @@
     style:right={options.right}
     style:width={options.width}
     style:height={options.height}
+    style:max-width={options.maxWidth}
     style:transform={options.transform}
     style:z-index={($modals.findIndex((t) => t.type === 'tooltip') ?? 1) + 10000}
   >

diff --git a/plugins/activity-resources/src/components/BasePreview.svelte b/plugins/activity-resources/src/components/BasePreview.svelte
@@ -39,6 +39,7 @@
 
   const client = getClient()
   const limit = 300
+  const tooltipLimit = 512
 
   let isActionsOpened = false
   let person: WithLookup<Person> | undefined = undefined
@@ -83,6 +84,14 @@
   } else {
     tooltipLabel = core.string.System
   }
+
+  function getTooltipText (markup: string): string {
+    const text = markupToText(markup)
+    if (text.length > tooltipLimit) {
+      return text.substring(0, tooltipLimit) + '...'
+    }
+    return text
+  }
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -138,7 +147,7 @@
       <span
         class="textContent overflow-label font-normal"
         class:contentOnly={type === 'content-only'}
-        use:tooltip={{ label: text ? getEmbeddedLabel(markupToText(text)) : intlLabel }}
+        use:tooltip={{ label: text ? getEmbeddedLabel(getTooltipText(text)) : intlLabel }}
       >
         {#if intlLabel}
           <Label label={intlLabel} />