From 8fa0ec9665eac8280070bf78cba72425d8e8f198 Mon Sep 17 00:00:00 2001
From: Lucas Magnus <lucasmagnusdasilva@gmail.com>
Date: Tue, 20 Feb 2024 11:13:31 -0300
Subject: [PATCH] fix helper responsive

---
 .../src/app/core/pages/cost-center/index.tsx   | 18 +++++++++++++++++-
 .../components/templates/cost-center/index.tsx |  2 +-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/core/pages/cost-center/index.tsx b/frontend/src/app/core/pages/cost-center/index.tsx
index 111e4d6..207763b 100644
--- a/frontend/src/app/core/pages/cost-center/index.tsx
+++ b/frontend/src/app/core/pages/cost-center/index.tsx
@@ -283,6 +283,7 @@ export const CostCenter: React.FC = () => {
           w="full"
           justifyContent="center"
           gap="1.5rem"
+          pb="3.5rem"
         >
           <Flex maxW="966px" flexDir="column" w="full">
             <CostCenterTemplate
@@ -306,12 +307,27 @@ export const CostCenter: React.FC = () => {
                 <Text color="gray.900" lineHeight="22px" fontSize="sm">
                   {operatingExpensesHelperP1}
                 </Text>
-                <Text color="gray.900" lineHeight="22px" fontSize="sm" mt="1rem">
+                <Text
+                  color="gray.900"
+                  lineHeight="22px"
+                  fontSize="sm"
+                  mt="1rem"
+                >
                   {operatingExpensesHelperP2}
                 </Text>
               </ActionHelper>
             </VStack>
           )}
+          {!isLargerThanMd && (
+            <ActionHelper title={'About Operating Expenses'}>
+              <Text color="gray.900" lineHeight="22px" fontSize="sm">
+                {operatingExpensesHelperP1}
+              </Text>
+              <Text color="gray.900" lineHeight="22px" fontSize="sm" mt="1rem">
+                {operatingExpensesHelperP2}
+              </Text>
+            </ActionHelper>
+          )}
         </Flex>
       </Sidebar>
     </Flex>
diff --git a/frontend/src/components/templates/cost-center/index.tsx b/frontend/src/components/templates/cost-center/index.tsx
index e40699c..7f4b110 100644
--- a/frontend/src/components/templates/cost-center/index.tsx
+++ b/frontend/src/components/templates/cost-center/index.tsx
@@ -37,7 +37,7 @@ export const CostCenterTemplate: React.FC<ICostCenterTemplate> = ({
   const [isSmallerThanMd] = useMediaQuery('(max-width: 768px)')
 
   return (
-    <Flex flexDir="column" w="full" pb="3.5rem">
+    <Flex flexDir="column" w="full">
       <Flex maxW={MAX_PAGE_WIDTH} alignSelf="center" flexDir="column" w="full">
         <Flex
           justifyContent="space-between"