Fix css style for search modal.

Author: nikoshell

src/components/search/Search.astro

@@ -1,19 +1,20 @@
 ---
 import SearchComponent from "astro-pagefind/components/Search";
 import Button from "@ui/Button.astro";
+
 ---
 
 <div class="search-wrapper hidden" style="display: none;">
 
-  <div class="w-full flex items-center justify-between z-40 h-0 md:h-[85px] m-auto ">
+  <div class="search-header flex items-center justify-between z-40 h-0 md:h-[85px] m-auto ">
     <h2 class="text-black text-4xl ml-10 top-[46px] md:top-[85px]">Search<h2/>
     <Button
+      id="search-close"
       icon="close"
       iconSize="fa-xl"
-      class="search-close w-[3em] h-[3em] top-[46px] md:top-[85px]"
+      class="w-[3em] h-[3em] top-[46px] md:top-[85px]"
     />
   </div>
-
   <div class="modal__overlay"></div>
 
   <SearchComponent
@@ -33,7 +34,7 @@ document.addEventListener("DOMContentLoaded", function () {
   const searchWrapper = document.querySelector(".search-wrapper") as HTMLElement | null;
   const searchContainer = document.querySelector(".pagefind-ui") as HTMLElement | null;
   const searchInput = searchContainer?.querySelector("input") as HTMLInputElement | null;
-  const closeButton = document.querySelector(".search-close") as HTMLElement | null;
+  const closeButton = document.querySelector("#search-close") as HTMLElement | null;
   const searchButton = document.getElementById("searchButton") as HTMLElement | null;
 
   let selectedIndex = -1;
@@ -151,11 +152,12 @@ document.addEventListener("DOMContentLoaded", function () {
 });
 </script>
 
-<style is:global>
-  .search-wrapper div{
-    max-width: calc(48rem + 8vw);
+<style >
+  .search-header {
+    max-width: 48rem;
+    margin:auto;
   }
-  .search-wrapper h2 {
+  .search-header h2 {
     position: relative;
     left: -12px;
     z-index:100;
@@ -186,13 +188,15 @@ document.addEventListener("DOMContentLoaded", function () {
     z-index: 100;
   }
 
-  .search-wrapper :global(.search-close) {
+
+</style>
+<style is:global>
+  #search-close {
     position: relative;
     left: -12px;
     margin: 0;
     border: 0;
     transition: opacity ease-out 0.2s;
     z-index: 10;
   }
-
 </style>

src/layouts/HomePageLayout.astro

@@ -50,6 +50,7 @@ const jsonLd = JSON.stringify({
     <a href="#main-content" class="sr-only"> Skip to main content</a>
 
     <Search />
+
     <Header />
 
     <main id="main-content" class="layout-wrapper overflow-x-clip">

src/layouts/Layout.astro

@@ -2,6 +2,7 @@
 import Header from "../components/header/header.astro";
 import Footer from "../components/footer.astro";
 import BaseHead from "../components/BaseHead.astro";
+import Search from "@components/search/Search.astro";
 
 export interface Props {
   title: string;
@@ -20,6 +21,7 @@ const { title, description } = Astro.props;
   <div class="flex flex-col items-stretch min-h-screen">
     <a href="#main-content" class="sr-only"> Skip to main content</a>
 
+    <Search />
     <Header />
 
     <main id="main-content" class="layout-wrapper overflow-x-clip">