Responsive collateral card on manage page. (#102)

Co-authored-by: Noisekit <[email protected]>
Synthetixio · Dec 13, 2024 · 5b0de3c · 5b0de3c
1 parent c76e38d
commit 5b0de3c
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/liquidity/ui/src/components/ChangeStat/ChangeStat.tsx b/liquidity/ui/src/components/ChangeStat/ChangeStat.tsx
@@ -17,7 +17,7 @@ const styles = {
   lg: {
     fontSize: '18px',
     fontWeight: '800',
-    lineHeight: '32px',
+    lineHeight: '24px',
   },
 };
 
@@ -48,6 +48,7 @@ export function ChangeStat({
       fontSize={styles[size].fontSize}
       fontWeight={styles[size].fontWeight}
       lineHeight={styles[size].lineHeight}
+      flexWrap="wrap"
     >
       <Text
         data-cy={dataCy}
@@ -66,7 +67,7 @@ export function ChangeStat({
         {!isPending && value ? formatFn(value) : null}
       </Text>
       {hasChanges && !isPending && value && !value.eq(newValue) ? (
-        <>
+        <Flex gap="1" alignItems="center" isTruncated>
           <ArrowForwardIcon />
           <Text
             textAlign="center"
@@ -78,7 +79,7 @@ export function ChangeStat({
           >
             {formatFn(newValue)}
           </Text>
-        </>
+        </Flex>
       ) : null}
     </Flex>
   );

diff --git a/liquidity/ui/src/components/Manage/CollateralStats.tsx b/liquidity/ui/src/components/Manage/CollateralStats.tsx
@@ -22,7 +22,7 @@ export function CollateralStats({
   });
 
   return (
-    <BorderBox p={4} flex="1" flexDirection="row" bg="navy.700">
+    <BorderBox maxW={['100%', '50%']} p={4} flex="1" flexDirection="row" bg="navy.700">
       <Flex
         opacity={!liquidityPosition && !hasChanges ? '40%' : '100%'}
         flexDirection="column"
@@ -33,9 +33,9 @@ export function CollateralStats({
             Collateral
           </Text>
         </Flex>
-        <Flex width="100%">
+        <Flex width="100%" isTruncated>
           {!isPendingLiquidityPosition && liquidityPosition && collateralType ? (
-            <Flex direction="column">
+            <Flex width="100%" direction="column" gap="1">
               <ChangeStat
                 value={liquidityPosition.collateralAmount}
                 newValue={newCollateralAmount}