Adjust the Dashboard for the long transaction event messages (#5330)

saleor · Jan 8, 2025 · 109565e · 109565e
1 parent 7b0c73b
commit 109565e
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/.changeset/poor-ads-eat.md b/.changeset/poor-ads-eat.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Added explicit max width to transaction event tooltip. Thanks to that longer message won't overflow.
diff --git a/src/orders/components/OrderTransaction/components/TransactionEvents/components/EventType.tsx b/src/orders/components/OrderTransaction/components/TransactionEvents/components/EventType.tsx
@@ -43,7 +43,8 @@ export const EventType = ({ type, message }: EventTypeProps) => {
           </Tooltip.Trigger>
           <Tooltip.Content side="bottom">
             <Tooltip.Arrow />
-            {message}
+            {/* Set to explicit value in order to avoid long message from overflowing */}
+            <Box __maxWidth="500px">{message}</Box>
           </Tooltip.Content>
         </Tooltip>
       )}