From dbe2846e3b869c6b4f3f865f827cfdf56b98b16e Mon Sep 17 00:00:00 2001
From: 0ko <0ko@noreply.codeberg.org>
Date: Tue, 3 Sep 2024 21:51:51 +0500
Subject: [PATCH] ui: improve commit graph layout

---
 templates/repo/graph.tmpl         | 19 ++++++++------
 web_src/css/features/gitgraph.css | 42 ++++++++++++++++++++++++-------
 2 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/templates/repo/graph.tmpl b/templates/repo/graph.tmpl
index 6e7b6cb2b5..04b056cc60 100644
--- a/templates/repo/graph.tmpl
+++ b/templates/repo/graph.tmpl
@@ -3,9 +3,9 @@
 	{{template "repo/header" .}}
 	<div class="ui container">
 		<div id="git-graph-container" class="ui segment{{if eq .Mode "monochrome"}} monochrome{{end}}">
-			<h2 class="ui header dividing">
-				{{ctx.Locale.Tr "repo.commit_graph"}}
-				<div class="ui icon buttons small color-buttons">
+			<div id="git-graph-heading">
+				<div id="git-graph-heading-left">
+					<h2>{{ctx.Locale.Tr "repo.commit_graph"}}</h2>
 					<div class="ui multiple selection search dropdown" id="flow-select-refs-dropdown">
 						<input type="hidden" name="flow">
 						<div class="default text">{{ctx.Locale.Tr "repo.commit_graph.select"}}</div>
@@ -45,14 +45,17 @@
 							{{end}}
 						</div>
 					</div>
+				</div>
+				<div class="ui icon buttons small">
 					<button id="flow-color-monochrome" class="ui icon button{{if eq .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}">{{svg "material-invert-colors" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}</button>
 					<button id="flow-color-colored" class="ui icon button{{if ne .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.color"}}">{{svg "material-palette" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.color"}}</button>
 				</div>
-			</h2>
-			<div class="ui dividing"></div>
-			<div class="is-loading tw-py-32 tw-hidden" id="loading-indicator"></div>
-			{{template "repo/graph/svgcontainer" .}}
-			{{template "repo/graph/commits" .}}
+			</div>
+			<div id="git-graph-content">
+				<div class="is-loading tw-py-32 tw-hidden" id="loading-indicator"></div>
+				{{template "repo/graph/svgcontainer" .}}
+				{{template "repo/graph/commits" .}}
+			</div>
 		</div>
 	</div>
 </div>
diff --git a/web_src/css/features/gitgraph.css b/web_src/css/features/gitgraph.css
index 45fb2d9555..4da871da61 100644
--- a/web_src/css/features/gitgraph.css
+++ b/web_src/css/features/gitgraph.css
@@ -1,24 +1,48 @@
-#git-graph-container {
+#git-graph-content {
   overflow-x: auto;
   width: 100%;
-  min-height: 350px;
+  min-height: 250px;
 }
 
-#git-graph-container h2 {
+#git-graph-heading {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  padding-bottom: 20px;
 }
 
-#git-graph-container .ui.header.dividing {
-  padding-bottom: 10px;
+#git-graph-heading-left {
+  display: flex;
+  gap: 1rem;
+}
+
+#git-graph-heading h2 {
+  margin: 0;
+}
+
+@media (min-width: 767.98px) {
+  #git-graph-heading {
+    align-items: center;
+  }
+}
+
+@media (max-width: 767.98px) {
+  #git-graph-heading,
+  #git-graph-heading-left {
+    flex-direction: column;
+  }
+
+  #git-graph-heading-left {
+    margin-bottom: 1rem;
+  }
+
+  h2,
+  #flow-select-refs-dropdown {
+    max-width: 100%;
+  }
 }
 
 #git-graph-container #flow-select-refs-dropdown {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
   min-width: 250px;
-  border-right: none;
 }
 
 #git-graph-container #flow-select-refs-dropdown .ui.label {