fix(core): fix responsive issues on address book list

input-output-hk · Jun 2, 2023 · 232f644 · 232f644
1 parent fec02ca
commit 232f644
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 5 deletions.
diff --git a/...wallet/src/views/browser-view/features/adress-book/components/AddressBook/AddressBook.tsx b/...wallet/src/views/browser-view/features/adress-book/components/AddressBook/AddressBook.tsx
@@ -23,6 +23,9 @@ import {
   AnalyticsEventNames
 } from '@providers/AnalyticsProvider/analyticsTracker';
 
+const ELLIPSIS_LEFT_SIDE_LENGTH = 34;
+const ELLIPSIS_RIGHT_SIDE_LENGTH = 34;
+
 export const AddressBook = withAddressBookContext((): React.ReactElement => {
   const { t: translate } = useTranslation();
   const { addressToEdit, setAddressToEdit } = useAddressBookStore();
@@ -69,7 +72,10 @@ export const AddressBook = withAddressBookContext((): React.ReactElement => {
           });
           setAddressToEdit(address);
           setIsFormVisible(true);
-        }
+        },
+        shouldUseEllipsisBeferoAfter: true,
+        beforeEllipsis: ELLIPSIS_LEFT_SIDE_LENGTH,
+        afterEllipsis: ELLIPSIS_RIGHT_SIDE_LENGTH
       })) || [],
     [addressList, analytics, setAddressToEdit]
   );

diff --git a/packages/core/src/ui/components/WalletAddresses/WalletAddressItem.module.scss b/packages/core/src/ui/components/WalletAddresses/WalletAddressItem.module.scss
@@ -46,6 +46,11 @@
   gap: size_unit(3);
   &.small {
     gap: size_unit(2);
+
+    .addressColor {
+      color: var(--text-color-secondary) !important;
+      text-align: right;
+    }
   }
   .listItemName {
     @include text-bodyLarge-bold;
@@ -79,10 +84,15 @@
 
   .addressColor {
     color: var(--text-color-secondary) !important;
-    text-align: right;
+    text-align: left;
   }
 }
 
+.addressBox {
+  display: block;
+  min-width: 0;
+}
+
 .listItemAvatar {
   align-items: center;
   background: rgba(127, 90, 240, 0.1) !important;

diff --git a/packages/core/src/ui/components/WalletAddresses/WalletAddressItem.tsx b/packages/core/src/ui/components/WalletAddresses/WalletAddressItem.tsx
@@ -20,6 +20,7 @@ export type WalletAddressItemProps = {
   beforeEllipsis?: number;
   afterEllipsis?: number;
   isSmall?: boolean;
+  shouldUseEllipsisBeferoAfter?: boolean;
 };
 
 const defaultBeforeEllipsis = 8;
@@ -33,7 +34,8 @@ export const WalletAddressItem = ({
   beforeEllipsis = defaultBeforeEllipsis,
   afterEllipsis = defaultAfterEllipsis,
   className,
-  isSmall = false
+  isSmall = false,
+  shouldUseEllipsisBeferoAfter
 }: WalletAddressItemProps): React.ReactElement => (
   <div
     onClick={() => onClick({ id, name, address })}
@@ -52,14 +54,14 @@ export const WalletAddressItem = ({
         </div>
       </div>
     </div>
-    <div className={styles.listItemBlock}>
+    <div className={cn(styles.listItemBlock, styles.addressBox)}>
       <Ellipsis
         dataTestId="address-list-item-address"
         text={address}
         textClassName={cn(styles.addressColor, styles.textField)}
         className={cn(styles.listItemBlock, styles.listItemAddress)}
         withTooltip={false}
-        {...(isSmall
+        {...(isSmall || shouldUseEllipsisBeferoAfter
           ? {
               beforeEllipsis,
               afterEllipsis