fix: Aligned delegate names in smaller screens

makerdao · Jul 19, 2023 · d90a306 · d90a306
1 parent e33098a
commit d90a306
Showing 1 changed file with 9 additions and 3 deletions.
diff --git a/modules/address/components/AddressIconBox.tsx b/modules/address/components/AddressIconBox.tsx
@@ -74,9 +74,15 @@ export default function AddressIconBox({
         <Flex sx={{ flexDirection: ['column', 'row'] }}>
           <Flex sx={{ alignItems: 'center' }}>
             {delegate ? (
-              <Text>
-                {limitTextLength ? limitString(delegate.name, limitTextLength, '...') : delegate.name}
-              </Text>
+              limitTextLength ? (
+                <Flex sx={{ flexDirection: 'column' }}>
+                  {delegate.name.split(' - ').map((name, i) => (
+                    <Text key={delegate.name + '-' + i}>{limitString(name, limitTextLength, '...')}</Text>
+                  ))}
+                </Flex>
+              ) : (
+                <Text>{delegate.name}</Text>
+              )
             ) : (
               <Text>
                 <Address address={address} maxLength={limitTextLength} />