From 4eb8d784f04ac3b3947df4b9aa15510ff6f69de6 Mon Sep 17 00:00:00 2001
From: Bogdan Crisan <bogdan@crbl.studio>
Date: Mon, 9 Dec 2024 23:56:23 +0100
Subject: [PATCH] [ECO-2413] Fix pool page mobile styling (#449)

Co-authored-by: Matt <90358481+xbtmatt@users.noreply.github.com>
---
 src/rust/processor                            |  2 +-
 .../trade-emojicoin/InputLabels.tsx           |  2 +-
 .../pools/components/liquidity/index.tsx      | 39 ++++++++++++-------
 3 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/src/rust/processor b/src/rust/processor
index de5d38e2a..f09cb58b5 160000
--- a/src/rust/processor
+++ b/src/rust/processor
@@ -1 +1 @@
-Subproject commit de5d38e2a2581cc623c60410d389038167dadc50
+Subproject commit f09cb58b5c02bc000b856445eff8615773a864ca
diff --git a/src/typescript/frontend/src/components/pages/emojicoin/components/trade-emojicoin/InputLabels.tsx b/src/typescript/frontend/src/components/pages/emojicoin/components/trade-emojicoin/InputLabels.tsx
index a4c0aecb4..615c04c5c 100644
--- a/src/typescript/frontend/src/components/pages/emojicoin/components/trade-emojicoin/InputLabels.tsx
+++ b/src/typescript/frontend/src/components/pages/emojicoin/components/trade-emojicoin/InputLabels.tsx
@@ -8,7 +8,7 @@ export const AptosInputLabel = () => (
 );
 
 export const EmojiInputLabelStyles =
-  "pixel-heading-3 text-light-gray text-[24px] md:text-[30px] cursor-default";
+  "pixel-heading-4 md:pixel-heading-3 text-light-gray text-[24px] cursor-default break-keep";
 
 export const EmojiInputLabel = ({ emoji }: { emoji: string }) => (
   <Emoji className={EmojiInputLabelStyles} emojis={emoji} />
diff --git a/src/typescript/frontend/src/components/pages/pools/components/liquidity/index.tsx b/src/typescript/frontend/src/components/pages/pools/components/liquidity/index.tsx
index 2e6fd3818..73c715978 100644
--- a/src/typescript/frontend/src/components/pages/pools/components/liquidity/index.tsx
+++ b/src/typescript/frontend/src/components/pages/pools/components/liquidity/index.tsx
@@ -27,6 +27,7 @@ import Info from "components/info";
 import { type PoolsData } from "../../ClientPoolsPage";
 import { EmojiPill } from "components/EmojiPill";
 import { FormattedNumber } from "components/FormattedNumber";
+import { useMatchBreakpoints } from "@hooks/index";
 
 type LiquidityProps = {
   market: PoolsData | undefined;
@@ -50,7 +51,7 @@ const InnerWrapper = ({
 );
 
 const grayLabel = `
-  pixel-heading-4 mb-[-6px] text-light-gray !leading-5 uppercase
+  md:pixel-heading-4 mb-[-6px] text-light-gray !leading-5 uppercase
 `;
 
 const inputAndOutputStyles = `
@@ -62,6 +63,8 @@ const inputAndOutputStyles = `
 const Liquidity = ({ market }: LiquidityProps) => {
   const { t } = translationFunction();
 
+  const { isMobile } = useMatchBreakpoints();
+
   const searchParams = useSearchParams();
 
   const presetInputAmount =
@@ -156,8 +159,10 @@ const Liquidity = ({ market }: LiquidityProps) => {
     <InnerWrapper id="apt" className="liquidity-input">
       <Column>
         <div className={grayLabel}>
-          {direction === "add" ? t("You deposit") : t("You get")}
-          {balanceLabel}
+          <span className="text-nowrap">
+            {direction === "add" ? t("You deposit") : t("You get")}
+            {balanceLabel}
+          </span>
           <FormattedNumber
             value={aptBalance}
             className={enoughApt ? "text-green" : "text-error"}
@@ -190,8 +195,10 @@ const Liquidity = ({ market }: LiquidityProps) => {
     <InnerWrapper id="emoji" className="liquidity-input">
       <Column>
         <div className={grayLabel}>
-          {direction === "add" ? "You deposit" : "You get"}
-          {balanceLabel}
+          <span className="text-nowrap">
+            {direction === "add" ? "You deposit" : "You get"}
+            {balanceLabel}
+          </span>
           <FormattedNumber
             value={emojicoinBalance}
             className={enoughEmoji ? "text-green" : "text-error"}
@@ -222,8 +229,10 @@ const Liquidity = ({ market }: LiquidityProps) => {
     <InnerWrapper id="lp" className="liquidity-input">
       <Column>
         <div className={grayLabel}>
-          {direction === "remove" ? "You deposit" : "You get"}
-          {balanceLabel}
+          <span className="text-nowrap">
+            {direction === "remove" ? "You deposit" : "You get"}
+            {balanceLabel}
+          </span>
           <FormattedNumber
             value={emojicoinLPBalance}
             className={enoughEmojiLP ? "text-green" : "text-error"}
@@ -248,7 +257,7 @@ const Liquidity = ({ market }: LiquidityProps) => {
           />
         )}
       </Column>
-      <div>
+      <div className="text-nowrap">
         <EmojiInputLabel emoji={market ? `${market.market.symbolData.symbol}` : ""} />
         <span className={EmojiInputLabelStyles}>{market ? " LP" : "-"}</span>
       </div>
@@ -258,17 +267,21 @@ const Liquidity = ({ market }: LiquidityProps) => {
   return (
     <Flex width="100%" justifyContent="center" p={{ _: "64px 17px", mobileM: "64px 33px" }}>
       <Column width="100%" maxWidth="414px" justifyContent="center">
-        <Flex width="100%" justifyContent="space-between" alignItems="baseline" mb="10px">
+        <Flex width="100%" justifyContent="space-between" alignItems="center" mb="10px">
           <Flex flexDirection="row">
-            <FlexGap gap="10px" position="relative" justifyContent="left" alignItems="baseline">
+            <FlexGap gap="10px" position="relative" justifyContent="left" alignItems="center">
               <button
                 onClick={() => setDirection(direction === "add" ? "remove" : "add")}
-                className="absolute left-[-30px] top-[-2px]"
+                className="absolute left-[-30px]"
               >
                 <Arrows color="econiaBlue" />
               </button>
 
-              <Text textScale="heading1" textTransform="uppercase">
+              <Text
+                textScale={isMobile ? "heading2" : "heading1"}
+                textTransform="uppercase"
+                className={isMobile ? "w-min" : ""}
+              >
                 {t(direction === "add" ? "Add liquidity" : "Remove liquidity")}
               </Text>
 
@@ -385,7 +398,7 @@ const Liquidity = ({ market }: LiquidityProps) => {
           </ButtonWithConnectWalletFallback>
         </Flex>
 
-        <Text textScale="heading1" textTransform="uppercase" mb="16px">
+        <Text textScale={isMobile ? "heading2" : "heading1"} textTransform="uppercase" mb="16px">
           {t("Reserves")}
         </Text>