From 2ce81f3ad824840515345fc427c792bbd0fa0ba8 Mon Sep 17 00:00:00 2001
From: Alejandro <alejandrogomez@bitrefill.com>
Date: Mon, 19 Jan 2026 16:24:53 +0100
Subject: [PATCH] fix: truncate invoice descriptions in confirm send dialog
 (#155)

Add proper truncation for long invoice descriptions in the wallet's
confirm send dialog. The description label is now flex-shrink-0 to
prevent it from shrinking, and a title attribute shows the full
description on hover.

Co-authored-by: Claude <noreply@anthropic.com>
---
 src/components/WalletViewer.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/WalletViewer.tsx b/src/components/WalletViewer.tsx
index 55e5db7..acd38a7 100644
--- a/src/components/WalletViewer.tsx
+++ b/src/components/WalletViewer.tsx
@@ -1572,11 +1572,14 @@ export default function WalletViewer() {
                       </div>
                     )}
                     {invoiceDetails?.description && (
-                      <div className="flex justify-between">
-                        <span className="text-muted-foreground">
+                      <div className="flex justify-between gap-2">
+                        <span className="text-muted-foreground flex-shrink-0">
                           Description:
                         </span>
-                        <span className="truncate ml-2">
+                        <span
+                          className="truncate text-right"
+                          title={invoiceDetails.description}
+                        >
                           {invoiceDetails.description}
                         </span>
                       </div>