From 9317a70426d6ea209e385a1a54360f7ff412feda Mon Sep 17 00:00:00 2001
From: Nikola Pavlov <144679078+tx-nikola@users.noreply.github.com>
Date: Wed, 4 Dec 2024 15:44:38 +0100
Subject: [PATCH] feat: add break-all to tx reason field (#340)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# What ❔

This PR adds a simple break-all to the reason field of the Transactions
view, so that when the transaction returns the error, it doesn't mess up
the UI - the error text just breaks into next lines.

## Why ❔

When the transaction fails, if the error text is too long, it will make
the whole tx UI scrollable for no reason, so we just add break-all to
fix the UI.
This is a fix for this issue:
https://github.com/matter-labs/block-explorer/issues/329
Example of a failed transaction and error text that makes the table
scrollable:
https://sepolia.explorer.zksync.io/tx/0xe8d8ec3d36bc6cbbcf3453fa855fb64b56c547411000a631fd41a6c622ce1d79#overview

## Checklist

<!-- Check your PR fulfills the following items. -->
<!-- For draft PRs check the boxes as you complete them. -->

- [x] PR title corresponds to the body of PR (we generate changelog
entries from PRs).
- [x] Tests for the changes have been added / updated.
- [x] Documentation comments have been added / updated.
---
 .../app/src/components/transactions/infoTable/GeneralInfo.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app/src/components/transactions/infoTable/GeneralInfo.vue b/packages/app/src/components/transactions/infoTable/GeneralInfo.vue
index d68bfc578..f68d1368f 100644
--- a/packages/app/src/components/transactions/infoTable/GeneralInfo.vue
+++ b/packages/app/src/components/transactions/infoTable/GeneralInfo.vue
@@ -324,7 +324,7 @@ const gasUsedPercent = computed(() => {
     @apply py-2;
   }
   .transaction-reason-value {
-    @apply text-error-600 whitespace-normal;
+    @apply text-error-600 whitespace-normal break-all;
   }
 }
 </style>