Final tweaks to the account selector

packages/ui/src/AccountSelector/AccountSelectorAddress.tsx

@@ -1,11 +1,11 @@
 import { Address } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/keys/v1/keys_pb';
 import { bech32mAddress } from '@penumbra-zone/bech32m/penumbra';
 import styled from 'styled-components';
-import { Text } from '../Text';
 import { useDensity } from '../hooks/useDensity';
 import { Density } from '../types/Density';
 import { CopyToClipboardButton } from '../CopyToClipboardButton';
 import { Shrink0 } from '../utils/Shrink0';
+import { technical, truncate } from '../utils/typography';
 
 const Root = styled.div<{ $ephemeral: boolean; $loading: boolean; $density: Density }>`
   border: 1px solid ${props => props.theme.color.other.tonalStroke};
@@ -24,6 +24,13 @@ const Root = styled.div<{ $ephemeral: boolean; $loading: boolean; $density: Dens
   ${props => props.$density === 'sparse' && 'word-break: break-all;'}
 `;
 
+const TextWrapper = styled.div<{ $density: Density }>`
+  flex-grow: 1;
+
+  ${props => props.$density === 'compact' && truncate}
+  ${technical}
+`;
+
 export interface AccountSelectorAddressProps {
   address?: Address;
   ephemeral: boolean;
@@ -39,9 +46,9 @@ export const AccountSelectorAddress = ({
 
   return (
     <Root $ephemeral={ephemeral} $loading={loading} $density={density}>
-      <Text technical truncate={density === 'compact'} as='div'>
+      <TextWrapper $density={density}>
         {address ? bech32mAddress(address) : `penumbra1...`}
-      </Text>
+      </TextWrapper>
 
       <Shrink0>
         <CopyToClipboardButton

packages/ui/src/AccountSelector/index.stories.tsx

@@ -50,7 +50,7 @@ export const WithAddress: Story = {
           the addresses. Thus, they are non-deterministic: if you select account #0, then #1, then
           back to #0, the 0th address will be different the second time around than it was the first
           time. In a real-world scenario, they <Text strong>are</Text> deterministic: for the same
-          address index, the address will always be the same.
+          address index, the (non-ephemeral) address will always be the same.
         </Text>
         <Text>
           Also, note that, to simulate loading times, there is a one-second delay on calculating the
@@ -71,6 +71,5 @@ export const WithAddress: Story = {
 export const WithoutAddress: Story = {
   args: {
     onChange: undefined,
-    filter: [0, 1, 2, 3, 4],
   },
 };

packages/ui/src/Text/index.tsx

@@ -10,6 +10,7 @@ import {
   small,
   strong,
   technical,
+  truncate,
   xxl,
 } from '../utils/typography';
 import { ReactNode } from 'react';
@@ -19,13 +20,7 @@ interface StyledProps {
 }
 
 const maybeTruncate = css<StyledProps>`
-  ${props =>
-    props.$truncate &&
-    `
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  `}
+  ${props => props.$truncate && truncate}
 `;
 
 const H1 = styled.h1<StyledProps>`

packages/ui/src/utils/typography.ts

@@ -142,3 +142,9 @@ export const button = css`
   font-weight: 500;
   line-height: ${props => props.theme.lineHeight.textBase};
 `;
+
+export const truncate = `
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;