From 58a4a92ab0d7ad26ce1f517c76425572344bba0d Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 31 Mar 2024 15:11:51 +0200
Subject: [PATCH 1/2] Use `flex-container` for dashboard layout

---
 templates/user/dashboard/dashboard.tmpl | 12 +++++-------
 templates/user/dashboard/repolist.tmpl  |  2 +-
 web_src/css/modules/flexcontainer.css   |  8 +++++++-
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/templates/user/dashboard/dashboard.tmpl b/templates/user/dashboard/dashboard.tmpl
index d4553ea61ba24..030fd49940652 100644
--- a/templates/user/dashboard/dashboard.tmpl
+++ b/templates/user/dashboard/dashboard.tmpl
@@ -1,15 +1,13 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content dashboard feeds">
 	{{template "user/dashboard/navbar" .}}
-	<div class="ui container">
+	<div class="ui container flex-container">
 		{{template "base/alert" .}}
-		<div class="ui mobile reversed stackable grid">
-			<div class="ui container ten wide column">
-				{{template "user/heatmap" .}}
-				{{template "user/dashboard/feeds" .}}
-			</div>
-			{{template "user/dashboard/repolist" .}}
+		<div class="flex-container-main">
+			{{template "user/heatmap" .}}
+			{{template "user/dashboard/feeds" .}}
 		</div>
+		{{template "user/dashboard/repolist" .}}
 	</div>
 </div>
 {{template "base/footer" .}}
diff --git a/templates/user/dashboard/repolist.tmpl b/templates/user/dashboard/repolist.tmpl
index a879f1fb9d870..be710675d560a 100644
--- a/templates/user/dashboard/repolist.tmpl
+++ b/templates/user/dashboard/repolist.tmpl
@@ -56,4 +56,4 @@ data.organizationId = {{.ContextUser.ID}};
 window.config.pageData.dashboardRepoList = data;
 </script>
 
-<div id="dashboard-repo-list" class="six wide column"></div>
+<div id="dashboard-repo-list" class="flex-container-sidebar"></div>
diff --git a/web_src/css/modules/flexcontainer.css b/web_src/css/modules/flexcontainer.css
index 0b559f1e7d32e..a8d7b959c797a 100644
--- a/web_src/css/modules/flexcontainer.css
+++ b/web_src/css/modules/flexcontainer.css
@@ -9,6 +9,10 @@
   width: 240px;
 }
 
+.flex-container-sidebar {
+  width: 35%;
+}
+
 .flex-container-main {
   flex: 1;
   min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */
@@ -18,7 +22,9 @@
   .flex-container {
     flex-direction: column;
   }
-  .flex-container-nav {
+  .flex-container-nav,
+  .flex-container-sidebar {
+    order: -1;
     width: auto;
   }
 }

From ed1b5cc747dc82406a613cac42bacb09faccce80 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 13 Apr 2024 22:54:13 +0200
Subject: [PATCH 2/2] add comments for classes

---
 web_src/css/modules/flexcontainer.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/web_src/css/modules/flexcontainer.css b/web_src/css/modules/flexcontainer.css
index 8103932cdcb49..5d4e12cc129b1 100644
--- a/web_src/css/modules/flexcontainer.css
+++ b/web_src/css/modules/flexcontainer.css
@@ -6,10 +6,12 @@
   margin-top: var(--page-spacing);
 }
 
+/* small options menu on the left, used in settings/admin pages */
 .flex-container-nav {
   width: 240px;
 }
 
+/* wide sidebar on the right, used in frontpage */
 .flex-container-sidebar {
   width: 35%;
 }