From fb908319c210d0c1f56cbd5ada9b076711a636c1 Mon Sep 17 00:00:00 2001
From: Arthur Geron <3487334+arthurgeron@users.noreply.github.com>
Date: Wed, 18 Sep 2024 23:09:41 -0300
Subject: [PATCH] fix: use rem based font size for more predictable results

---
 .../component/TxInput/TxInputCoin/TxInputCoin.tsx         | 6 +++++-
 packages/ui/src/components/Address/Address.tsx            | 8 ++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/app-explorer/src/systems/Transaction/component/TxInput/TxInputCoin/TxInputCoin.tsx b/packages/app-explorer/src/systems/Transaction/component/TxInput/TxInputCoin/TxInputCoin.tsx
index 9a252b69..d3c1e0e1 100644
--- a/packages/app-explorer/src/systems/Transaction/component/TxInput/TxInputCoin/TxInputCoin.tsx
+++ b/packages/app-explorer/src/systems/Transaction/component/TxInput/TxInputCoin/TxInputCoin.tsx
@@ -42,7 +42,11 @@ export const TxInputCoin = createComponent<
             </Badge>
 
             <Flex className="w-full items-start tablet:items-center flex flex-col tablet:flex-row gap-2 tablet:gap-4">
-              <AssetItem assetId={assetId} className="flex-1" prefix="Asset:">
+              <AssetItem
+                assetId={assetId}
+                className="flex-1 text-sm"
+                prefix="Asset:"
+              >
                 <Address
                   prefix="From:"
                   value={input.owner || ''}
diff --git a/packages/ui/src/components/Address/Address.tsx b/packages/ui/src/components/Address/Address.tsx
index a6272911..439f6d7e 100644
--- a/packages/ui/src/components/Address/Address.tsx
+++ b/packages/ui/src/components/Address/Address.tsx
@@ -39,7 +39,7 @@ const AddressSpan = ({
   short: string;
   className?: string;
 }) => {
-  const baseClass = cx(['text-[1em]', className]);
+  const baseClass = cx(['text-sm', className]);
   return (
     <>
       {full && (
@@ -96,7 +96,7 @@ export const Address = createComponent<AddressProps, 'div'>({
                 {linkProps ? (
                   <Link
                     {...linkProps}
-                    className={cx('text-xs text-[1em]')}
+                    className={cx('text-xs text-sm')}
                     onClick={(e) => {
                       e.stopPropagation();
                     }}
@@ -128,7 +128,7 @@ export const Address = createComponent<AddressProps, 'div'>({
 const styles = tv({
   slots: {
     root: 'flex gap-1 text-sm font-mono',
-    prefix: 'mr-px text-[1em] text-secondary',
-    address: 'text-[1em] text-muted mt-px gap-3',
+    prefix: 'mr-px text-sm text-secondary',
+    address: 'text-sm text-muted mt-px gap-3',
   },
 });