From e7613605552b499dc2ed2a0476a54038cdffa5c5 Mon Sep 17 00:00:00 2001
From: Kerwin Bryant <kerwin612@qq.com>
Date: Mon, 10 Mar 2025 07:34:15 +0000
Subject: [PATCH] Change the layout of the view page from CSS Grid to Flexbox

---
 templates/repo/view.tmpl  |  2 +-
 web_src/css/repo/home.css | 28 +++++++++-------------------
 2 files changed, 10 insertions(+), 20 deletions(-)

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;
   }
 }