Merge branch 'frontend-fix-transactions' into release-v4.47.0

Author: thisconnect

frontends/web/src/components/amount/amount.module.css

@@ -1,3 +1,9 @@
+.amount {
+    flex-shrink: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .space {
     margin-left: 0.33ch;
 }

frontends/web/src/components/amount/amount.tsx

@@ -110,7 +110,7 @@ export const Amount = ({
   };
 
   return (
-    <span onClick={handleClick}>
+    <span className={style.amount} onClick={handleClick}>
       <FormattedAmount
         amount={amount}
         unit={unit}

frontends/web/src/components/amount/conversion-amount.module.css

@@ -8,18 +8,20 @@
   display: flex;
   font-variant: tabular-nums;
   margin-left: auto;
-  gap: var(--space-eight);
+  gap: 3px;
 }
 
 .txPrefix,
 .txUnit {
   color: var(--color-secondary);
   font-size: 14px;
   line-height: 1.285714;
+  white-space: nowrap;
 }
 
 .txConversionAmount .txUnit {
   font-size: 12px;
+  flex-shrink: 0;
 }
 
 .txSmallInlineIcon img {

frontends/web/src/components/transactions/transaction.module.css

@@ -63,9 +63,13 @@
   line-height: 1.285714;
   padding: 0 var(--space-quarter) 0 48px;
   text-align: right;
+  white-space: nowrap;
 }
 @media (max-width: 560px) {
   .txAmountsColumn {
+    flex-shrink: 1;
+    flex-basis: 60%;
+    max-width: 60%;
     padding-left: 24px;
   }
 }
@@ -76,15 +80,19 @@
 }
 
 .txAmount {
+  align-items: baseline;
   font-size: 16px;
   font-variant: tabular-nums;
+  gap: 3px;
+  justify-content: flex-end;
   line-height: 1.25;
-  display: block;
+  display: flex;
   padding: 3px 0 3px 0;
 }
 @media (max-width: 560px) {
   .txAmount {
     padding-bottom: 4px;
+    flex-shrink: 1;
   }
 }
 
@@ -95,6 +103,12 @@
   color: var(--color-green);
 }
 
+.txUnit {
+  color: var(--color-secondary);
+  font-size: 14px;
+  line-height: 1.285714;
+}
+
 .txNote {
   color: var(--color-secondary);
   display: block;

frontends/web/src/components/transactions/transaction.tsx

@@ -160,16 +160,17 @@ const Amounts = ({
   type,
 }: TAmountsProps) => {
   const txTypeClass = `txAmount-${type}`;
-  const sign = getTxSign(type);
   const recv = type === 'receive';
+  const displayAmount = recv ? amount.amount : deductedAmount.amount;
+  const sign = displayAmount ? getTxSign(type) : '';
 
   return (
     <span className={`${styles.txAmountsColumn} ${styles[txTypeClass]}`}>
       {/* <data value={amount.amount}> */}
       <span className={styles.txAmount}>
         {sign}
         <Amount
-          amount={recv ? amount.amount : deductedAmount.amount}
+          amount={displayAmount}
           unit={recv ? amount.unit : deductedAmount.unit}
         />
         <span className={styles.txUnit}>