From 8fc9bfd84aa977dfdcb6cb9d60eb9a5bba856846 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krzysztof=20=C5=BBuraw?=
 <9116238+krzysztofzuraw@users.noreply.github.com>
Date: Mon, 30 Dec 2024 12:15:14 +0100
Subject: [PATCH] Adjust the Dashboard for the long transaction event messages

---
 .changeset/poor-ads-eat.md                                   | 5 +++++
 .../components/TransactionEvents/components/EventType.tsx    | 3 ++-
 2 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/poor-ads-eat.md

diff --git a/.changeset/poor-ads-eat.md b/.changeset/poor-ads-eat.md
new file mode 100644
index 00000000000..57501e578a0
--- /dev/null
+++ 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
index f3dc48db798..d0e004f1518 100644
--- 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>
       )}