diff --git a/templates/repo/view.tmpl b/templates/repo/view.tmpl
index f28dd30f54..6073b91914 100644
--- a/templates/repo/view.tmpl
+++ b/templates/repo/view.tmpl
@@ -16,7 +16,7 @@
 
 		{{template "repo/code/recently_pushed_new_branches" .}}
 
-		<div class="{{Iif .RepoPreferences.ShowFileViewTreeSidebar "repo-view-with-sidebar" "repo-view-content-only"}}">
+		<div class="repo-view-container {{Iif .RepoPreferences.ShowFileViewTreeSidebar "repo-view-with-sidebar" "repo-view-content-only"}}">
 			<div class="repo-view-file-tree-sidebar not-mobile {{if not .RepoPreferences.ShowFileViewTreeSidebar}}tw-hidden{{end}}" {{if .IsSigned}} data-is-signed {{end}}>{{template "repo/view_file_tree_sidebar" .}}</div>
 			<div class="repo-view-content">
 				{{template "repo/view_content" .}}
diff --git a/web_src/css/repo/home.css b/web_src/css/repo/home.css
index f81dba8b81..222a5082f7 100644
--- a/web_src/css/repo/home.css
+++ b/web_src/css/repo/home.css
@@ -49,23 +49,14 @@
   }
 }
 
-.repo-view-with-sidebar {
-  display: grid;
-  grid-template-columns: 300px auto;
-  grid-template-rows: auto auto 1fr;
+.repo-view-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--page-spacing);
 }
 
 .repo-view-content {
-  min-width: 0;
-  grid-column: 1;
-  grid-row: 1 / 4;
-}
-
-.repo-view-with-sidebar .repo-view-content {
-  min-width: 0;
-  grid-column: 2;
-  grid-row: 1 / 4;
-  margin-left: 1rem;
+  flex: 1;
 }
 
 #view-file-tree.is-loading {
@@ -73,6 +64,7 @@
 }
 
 .repo-view-with-sidebar .repo-view-file-tree-sidebar {
+  flex: 0 1 15%;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -83,18 +75,16 @@
   z-index: 8;
 }
 
-.repo-view-with-sidebar .repo-button-row {
+.repo-view-container .repo-button-row {
   margin-top: 0 !important;
 }
 
 @media (max-width: 767.98px) {
   .repo-view-with-sidebar {
-    grid-template-columns: auto;
-    grid-template-rows: auto auto auto;
+    flex: 1 1 0;
   }
   .repo-view-content {
-    grid-column: 1;
-    grid-row: 2;
+    flex: 1 1 0;
   }
 }