From 549efd6113ccc3960f1cfa79754c1208e4d90c25 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Mon, 25 Nov 2024 14:35:44 +0100
Subject: [PATCH] frontend: show the full text of long transaction notes

Long transaction notes were only shown on one line and cut off by
an ellipsis symbol.

Fixed by always showing the full transaction note and break onto
multiple lines if necessary.

Transactions without notes show as a fallback a comment such as
`received to <address>` which should only use one line and is cut
off with an ellipsis...
---
 CHANGELOG.md                                  |  1 +
 .../transactions/transaction.module.css       | 22 +++++++++++--------
 .../components/transactions/transaction.tsx   |  2 +-
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 33b92cfe13..1231dee350 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Unreleased
+- Fix long transaction notes to show fully on multiple lines when necessary 
 
 # 4.46.0
 - Android: enable export logs feature
diff --git a/frontends/web/src/components/transactions/transaction.module.css b/frontends/web/src/components/transactions/transaction.module.css
index 870f31c5ed..9c6bf60e6f 100644
--- a/frontends/web/src/components/transactions/transaction.module.css
+++ b/frontends/web/src/components/transactions/transaction.module.css
@@ -51,6 +51,7 @@
   flex-direction: column;
   flex-grow: 1;
   flex-shrink: 1;
+  overflow: hidden;
 }
 
 .txAmountsColumn {
@@ -106,10 +107,12 @@
 }
 
 .txNote {
+  color: var(--color-secondary);
   display: block;
   padding: 3px 0;
 }
 .txNoteText {
+  color: var(--color-default);
   font-size: 16px;
   line-height: 1.25;
 }
@@ -119,13 +122,6 @@
   }
 }
 
-.txInfoColumn,
-.txNote {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .txDate,
 .txProgress {
   align-items: center;
@@ -146,8 +142,6 @@
 .txProgressTextShort {
   flex-grow: 0;
   flex-shrink: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
   padding-right: var(--space-eight);
 }
 .txProgressTextShort {
@@ -168,6 +162,13 @@
   vertical-align: text-bottom;
 }
 
+.txNoteWithAddress {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .addresses {
   color: var(--color-secondary);
   font-size: 14px;
@@ -175,6 +176,7 @@
   line-height: 1.285714;
 }
 .txType {
+  color: var(--color-default);
   font-size: 16px;
   line-height: 1.25;
 }
@@ -202,6 +204,8 @@
   cursor: pointer;
   display: block;
   flex-basis: 61px;
+  flex-grow: 0;
+  flex-shrink: 0;
   font-size: inherit;
   line-height: inherit;
   margin: 0 var(--space-quarter) 0 0;
diff --git a/frontends/web/src/components/transactions/transaction.tsx b/frontends/web/src/components/transactions/transaction.tsx
index f1c83dd716..75c74a5782 100644
--- a/frontends/web/src/components/transactions/transaction.tsx
+++ b/frontends/web/src/components/transactions/transaction.tsx
@@ -243,7 +243,7 @@ const Addresses = ({
   );
 
   return (
-    <span>
+    <span className={styles.txNoteWithAddress}>
       <span className={styles.txType}>
         {label}
       </span>