Merge pull request #3025 from tallyhowallet/ux-fixes

UX fixes for token selector and Wallet page buttons
tahowallet · Feb 13, 2023 · 104d7cb · 104d7cb
2 parents d81a2a4 + 3c754cb
commit 104d7cb
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/ui/components/Shared/SharedAssetItem.tsx b/ui/components/Shared/SharedAssetItem.tsx
@@ -65,8 +65,12 @@ export default function SharedAssetItem<T extends AnyAsset>(
             />
 
             <div className="left_content">
-              <div className="symbol">{asset.symbol}</div>
-              <div className="token_subtitle">{asset.name}</div>
+              <div className="symbol ellipsis" title={asset.symbol}>
+                {asset.symbol}
+              </div>
+              <div className="token_subtitle ellipsis" title={asset.name}>
+                {asset.name}
+              </div>
             </div>
           </div>
 
@@ -94,19 +98,23 @@ export default function SharedAssetItem<T extends AnyAsset>(
         {`
           .left {
             display: flex;
+            min-width: 0;
           }
           .list_item {
             display: flex;
             flex-direction: row;
             justify-content: space-between;
             align-items: center;
+            width: 100%;
           }
           .left_content {
             display: flex;
             flex-direction: column;
             height: 41px;
             justify-content: space-between;
-            margin-left: 16px;
+            margin: 0 8px 0 16px;
+            max-width: 100%;
+            min-width: 0;
           }
           .right_content {
             display: flex;

diff --git a/ui/components/Wallet/WalletAccountBalanceControl.tsx b/ui/components/Wallet/WalletAccountBalanceControl.tsx
@@ -32,7 +32,7 @@ function ActionButtons(props: ActionButtonsProps): ReactElement {
   return (
     <div
       className={classNames("action_buttons_wrap", {
-        margin: isEnabled(FeatureFlags.SUPPORT_NFT_TAB),
+        with_icons: isEnabled(FeatureFlags.SUPPORT_NFT_TAB),
       })}
     >
       {isEnabled(FeatureFlags.SUPPORT_NFT_TAB) ? (
@@ -98,10 +98,12 @@ function ActionButtons(props: ActionButtonsProps): ReactElement {
           .action_buttons_wrap {
             display: flex;
             width: 180px;
+            gap: 16px;
             justify-content: center;
           }
-          .margin {
+          .action_buttons_wrap.with_icons {
             margin: 8px 0 32px;
+            gap: 0;
           }
           .button_wrap {
             margin: 0 7px;