Change the layout of the view page from CSS Grid to Flexbox

Author: kerwin612

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" .}}

web_src/css/repo/home.css

@@ -49,30 +49,22 @@
   }
 }
 
-.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 {
   aspect-ratio: 5.415; /* the size is about 790 x 145 */
 }
 
 .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;
   }
 }