diff --git a/Website/modules/Search.tsx b/Website/modules/Search.tsx
index 253ed21..5ade055 100644
--- a/Website/modules/Search.tsx
+++ b/Website/modules/Search.tsx
@@ -36,6 +36,7 @@ export default function Search({onJobsChanged} : {onJobsChanged: EventHandler<an
     }
 
     const searchBoxValueChanged : ChangeEventHandler<HTMLInputElement> = (event) => {
+        event.currentTarget.style.width = event.target.value.length + "ch";
         if(mangaConnectors === undefined)
             return;
         var str : string = event.target.value;
diff --git a/Website/styles/search.css b/Website/styles/search.css
index dda4f20..f70aa90 100644
--- a/Website/styles/search.css
+++ b/Website/styles/search.css
@@ -24,7 +24,8 @@
     border-bottom-left-radius: 2px;
     border-top-left-radius: 2px;
     border-left-width: 2px !important;
-    width: 300px;
+    min-width: 300px;
+    max-width: 50vw;
 }
 
 #Searchbox-connector {