fix(ui): #1806: add truncation to ValueViewComponent (#1856)

* fix(ui): #1806: add truncation to `ValueViewComponent` * chore: changeset
penumbra-zone · Oct 15, 2024 · dad8165 · dad8165
1 parent 9d68f48
commit dad8165
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/.changeset/thick-parrots-lie.md 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
@@ -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>