From dad81654c87d375dea6a8dc4dfb2ac5c4c8cb3e7 Mon Sep 17 00:00:00 2001
From: Max Korsunov <maxkors2014@gmail.com>
Date: Tue, 15 Oct 2024 17:46:19 +0200
Subject: [PATCH] fix(ui): #1806: add truncation to `ValueViewComponent`
 (#1856)

* fix(ui): #1806: add truncation to `ValueViewComponent`

* chore: changeset
---
 .changeset/thick-parrots-lie.md              | 5 +++++
 packages/ui/src/ValueViewComponent/index.tsx | 5 ++++-
 2 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/thick-parrots-lie.md

diff --git a/.changeset/thick-parrots-lie.md b/.changeset/thick-parrots-lie.md
new file mode 100644
index 0000000000..bdd9a86380
--- /dev/null
+++ b/.changeset/thick-parrots-lie.md
@@ -0,0 +1,5 @@
+---
+'@penumbra-zone/ui': patch
+---
+
+Add ellipsis to `ValueViewComponent`
diff --git a/packages/ui/src/ValueViewComponent/index.tsx b/packages/ui/src/ValueViewComponent/index.tsx
index b86162d21d..10aff255cd 100644
--- a/packages/ui/src/ValueViewComponent/index.tsx
+++ b/packages/ui/src/ValueViewComponent/index.tsx
@@ -50,6 +50,7 @@ const Content = styled.div<{ $context: Context; $priority: 'primary' | 'secondar
 const SymbolWrapper = styled.div`
   flex-grow: 1;
   flex-shrink: 1;
+  min-width: 50px;
 
   overflow: hidden;
   text-overflow: ellipsis;
@@ -118,7 +119,9 @@ export const ValueViewComponent = <SelectedContext extends Context = 'default'>(
         </AssetIconWrapper>
 
         <Content $context={context ?? 'default'} $priority={priority}>
-          <ValueText density={density}>{formattedAmount} </ValueText>
+          <SymbolWrapper title={formattedAmount}>
+            <ValueText density={density}>{formattedAmount} </ValueText>
+          </SymbolWrapper>
           <SymbolWrapper title={symbol}>
             <ValueText density={density}>{symbol}</ValueText>
           </SymbolWrapper>