Remade header via grid instead of flexbox to make a proper searchbox centering

frontend/src/lib/components/header.svelte

@@ -12,6 +12,7 @@
 
 <header class="header prevent-select" data-sveltekit-preload-data="hover">
 
+    <div class="container">
         <Icon class="header__menu-button" image={MenuIcon} size="64px"/>
 
         <img class="header__logo" alt="WeirdCat.su" src={Logo}>
@@ -19,19 +20,22 @@
         <a class="header__link"  href="/">Home</a>
         <a class="header__link" href="/blog">Blog</a>
         <a class="header__link" href="/services">Services</a>
+    </div>
 
-    <Spacer type="horizontal"/>
     <Searchbar id="searchbar"/>
 
+    <div class="container">
+        <Spacer type="left"/>
         <Icon class="header__language-button" image={LanguageIcon} size="40px"/>
         <Icon class="header__darkmode-button" image={DarkmodeIcon} size="40px"/>
+    </div>
 
 </header>
 
 <style>
     .header {
-        display: flex;
-        justify-content: space-evenly;
+        display: grid;
+        grid-template-columns: 1fr auto 1fr;
         align-items: center;
 
         gap: 20px;
@@ -58,4 +62,11 @@
         color: var(--col_text_hint);
     }
 
+    .container {
+        display: flex;
+        align-items: inherit;
+        padding: inherit;
+        gap: inherit;
+    }
+
 </style>

frontend/src/lib/components/searchbar.svelte

@@ -11,7 +11,6 @@
 <style>
     .searchbar {
 
-        position: absolute;
         display: flex;
         align-items: center;
 
@@ -21,7 +20,6 @@
 
         height: 36px;
         padding: 10px;
-        margin-inline: auto auto;
     }
 
     .searchbar__input {