diff --git a/templates/repo/graph.tmpl b/templates/repo/graph.tmpl index 6e7b6cb2b..04b056cc6 100644 --- a/templates/repo/graph.tmpl +++ b/templates/repo/graph.tmpl @@ -3,9 +3,9 @@ {{template "repo/header" .}}
-

- {{ctx.Locale.Tr "repo.commit_graph"}} -
+
+
+

{{ctx.Locale.Tr "repo.commit_graph"}}

+
+
-

-
-
- {{template "repo/graph/svgcontainer" .}} - {{template "repo/graph/commits" .}} +
+
+
+ {{template "repo/graph/svgcontainer" .}} + {{template "repo/graph/commits" .}} +
diff --git a/web_src/css/features/gitgraph.css b/web_src/css/features/gitgraph.css index 45fb2d955..4da871da6 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 {