shorten filter input on marketplace page and update MainArea height

blockscout · Jun 5, 2024 · 57de62f · 57de62f
1 parent 87bf359
commit 57de62f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/ui/pages/Marketplace.tsx b/ui/pages/Marketplace.tsx
@@ -225,7 +225,7 @@ const Marketplace = () => {
           placeholder="Find app by name or keyword..."
           isLoading={ isPlaceholderData }
           size={ feature.securityReportsUrl ? 'xs' : 'sm' }
-          flex="1"
+          w={{ base: '100%', lg: '350px' }}
         />
       </Flex>
 

diff --git a/ui/shared/layout/components/MainArea.tsx b/ui/shared/layout/components/MainArea.tsx
@@ -1,14 +1,27 @@
 import { Flex, chakra } from '@chakra-ui/react';
 import React from 'react';
 
+import config from 'configs/app';
+
 interface Props {
   children: React.ReactNode;
   className?: string;
 }
 
+const TOP_BAR_HEIGHT = 36;
+const HORIZONTAL_NAV_BAR_HEIGHT = config.UI.navigation.layout === 'horizontal' ? 49 : 0;
+
 const MainArea = ({ children, className }: Props) => {
   return (
-    <Flex className={ className } w="100%" minH="calc(100vh - 36px)" alignItems="stretch">
+    <Flex
+      className={ className }
+      w="100%"
+      minH={{
+        base: `calc(100vh - ${ TOP_BAR_HEIGHT }px)`,
+        lg: `calc(100vh - ${ TOP_BAR_HEIGHT + HORIZONTAL_NAV_BAR_HEIGHT }px)`,
+      }}
+      alignItems="stretch"
+    >
       { children }
     </Flex>
   );