refactor: adjusting height of header to reduce extra white space below search bar

client/src/App.jsx

@@ -74,7 +74,7 @@ function AppFoundation() {
   return (
     <>
       <DialogPopup dialog={dialog}/>
-      <Grid css={styles} templateRows="1fr 11fr" templateColumns="auto 1fr">
+      <Grid css={styles} templateRows="1fr 13fr" templateColumns="auto 1fr">
         <GridItem rowSpan={2} colSpan={1}>
           <Sidebar/>
         </GridItem>

client/src/components/layout/Header.jsx

@@ -1,7 +1,8 @@
-import {useSlotRecipe, Text, Flex} from "@chakra-ui/react"
+import {useSlotRecipe, Text, Flex, Input, InputGroup} from "@chakra-ui/react"
 import UserAvatarMenu from "./UserAvatarMenu.jsx";
 import useAuthStore from "@/store/authStore";
 import {SearchBar} from "@/components/dashboard/SearchBar.jsx";
+import {Search} from "lucide-react";
 
 // Import the asset properly so Vite can bundle it for any server
 // import defaultAvatar from "@/assets/user_profile.svg";
@@ -20,9 +21,11 @@ export default function Header() {
 
   return (
     <Flex css={styles.root}>
-      <Flex css={styles.search_bar}>
-       <SearchBar placeholder="Enter a volcano to search"/>
-      </Flex>
+      <InputGroup startElement={<Search />} css={styles.search_bar}>
+        <Input
+          placeholder="Enter a volcano to search"
+        />
+      </InputGroup>
 
       {/* User Profile Section */}
       <Flex css={styles.user_info}>