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