fix: useBreakpointValue for header position

Author: gadomski

src/app.tsx

@@ -5,6 +5,7 @@ import {
   Flex,
   GridItem,
   SimpleGrid,
+  useBreakpointValue,
 } from "@chakra-ui/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ErrorBoundary } from "react-error-boundary";
@@ -17,6 +18,7 @@ import { StacMapProvider } from "./provider";
 
 export default function App() {
   const queryClient = new QueryClient({});
+  const isHeaderAboveMap = useBreakpointValue({ base: true, md: false });
 
   return (
     <QueryClientProvider client={queryClient}>
@@ -29,15 +31,19 @@ export default function App() {
           </Box>
           <Container zIndex={1} fluid h={"dvh"} py={4} pointerEvents={"none"}>
             <SimpleGrid columns={{ base: 1, md: 3 }} gap={4}>
-              <GridItem colSpan={1} hideFrom={"md"}>
-                <Header></Header>
-              </GridItem>
+              {isHeaderAboveMap && (
+                <GridItem colSpan={1}>
+                  <Header></Header>
+                </GridItem>
+              )}
               <GridItem colSpan={1}>
                 <Panel></Panel>
               </GridItem>
-              <GridItem colSpan={2} hideBelow={"md"}>
-                <Header></Header>
-              </GridItem>
+              {!isHeaderAboveMap && (
+                <GridItem colSpan={2} hideBelow={"md"}>
+                  <Header></Header>
+                </GridItem>
+              )}
             </SimpleGrid>
           </Container>
           <Toaster></Toaster>