fix helper responsive

CheesecakeLabs · Feb 20, 2024 · 8fa0ec9 · 8fa0ec9
1 parent ad4148f
commit 8fa0ec9
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git 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
@@ -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"