Powerful adaptive for the header

frontend/src/lib/components/searchbar.svelte

@@ -1,11 +1,20 @@
 <script>
     import Icon from "./icon.svelte";
     import SearchIcon from "$lib/images/icons/ui/search.svg";
+
+    let classList = "";
+    export { classList as class };
 </script>
 
-<div class="searchbar">
-    <Icon class="searchbar__icon" image={SearchIcon} size="36px"/>
-    <input class="searchbar__input" type="text" placeholder="Search stuff...">
+<div class="{classList} searchbar">
+    <div class="normal">
+        <Icon class="searchbar__icon" image={SearchIcon} size="36px"/>
+        <input class="searchbar__input" type="text" placeholder="Search stuff...">
+    </div>
+    <div class="compact">
+        <Icon class="searchbar__icon" image={SearchIcon} size="36px"/>
+    </div>
+
 </div>
 
 <style>
@@ -18,6 +27,7 @@
         border-radius: 30px;
 
 
+        width: auto;
         height: 36px;
         padding: 10px;
     }
@@ -27,6 +37,7 @@
         background-color: transparent;
         color: var(--col_text_panel);
 
+        max-width: 200px;
         font-size: 16px;
     }
 
@@ -34,4 +45,48 @@
         outline: none;
     }
 
+    .compact {
+        display: none;
+    }
+
+    @media only screen and (max-width: 935px) {
+
+        .searchbar {
+            margin-left: auto;
+        }
+        .normal {
+            display: none;
+        }
+        .compact {
+            display: flex;
+        }
+    }
+
+    @media only screen and (max-width: 730px) {
+
+        .searchbar {
+            margin-left: auto;
+        }
+        .normal {
+            display: flex;
+        }
+        .compact {
+            display: none;
+        }
+
+    }
+
+    @media only screen and (max-width: 506px) {
+
+        .searchbar {
+            margin-left: auto;
+        }
+        .normal {
+            display: none;
+        }
+        .compact {
+            display: flex;
+        }
+    }
+
 </style>