diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index f5a81bc27b..9275825d65 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -118,7 +118,7 @@
 			</div>
 
 			{{if $isHomepage}}
-				<div style="width: 25%">
+				<div class="flex-container-repo">
 					<form class="ignore-dirty tw-flex tw-flex-1 tw-mt-1" action="{{.RepoLink}}/search" method="get">
 						<div class="ui small action input tw-flex-1">
 							<input name="q" size="10" placeholder="{{ctx.Locale.Tr "search.code_kind"}}">
diff --git a/web_src/css/modules/flexcontainer.css b/web_src/css/modules/flexcontainer.css
index 5d4e12cc12..338ca4d890 100644
--- a/web_src/css/modules/flexcontainer.css
+++ b/web_src/css/modules/flexcontainer.css
@@ -21,6 +21,10 @@
   min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */
 }
 
+.flex-container-repo {
+  width: 25%;
+}
+
 @media (max-width: 767.98px) {
   .flex-container {
     flex-direction: column;
@@ -30,4 +34,7 @@
     order: -1;
     width: auto;
   }
+  .flex-container-repo {
+    width: 100%;
+  }
 }