From 783f7ccb2c84f41a3b33ccfe4a8212361266dd87 Mon Sep 17 00:00:00 2001
From: Giteabot <teabot@gitea.io>
Date: Thu, 15 Jun 2023 20:32:59 -0400
Subject: [PATCH] Fix some UI alignments (#25277) (#25290)

Backport #25277 by @wxiaoguang

Fixes: https://github.com/go-gitea/gitea/issues/25282

Fix the problems:

1. The `repo-button-row` had various patches before, this PR makes it
consistent
2. The "Add File" has wrong CSS class "icon", remove it
3. The "Add File" padding was overridden by "!important", fix it by
`.repo-button-row .button.dropdown` with comment
4. The selector `.ui.segments ~ .ui.top.attached.header` is incorrect,
it should use `+`

The `repo-button-row` is only used on 3 pages:


![image](https://github.com/go-gitea/gitea/assets/2114189/16057ff0-7d30-41ca-ac13-70d074364566)


![image](https://github.com/go-gitea/gitea/assets/2114189/cbe2acb1-07b6-48f3-9f28-407a75f8c4ed)


![image](https://github.com/go-gitea/gitea/assets/2114189/341416b3-f6a8-466f-a140-361ee80e53a7)


![image](https://github.com/go-gitea/gitea/assets/2114189/3d4b7857-ef99-4a3f-a667-9890714a096d)

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
---
 templates/repo/commits.tmpl   |  2 +-
 templates/repo/home.tmpl      |  8 ++++----
 templates/repo/wiki/view.tmpl |  2 +-
 web_src/css/base.css          |  4 ++--
 web_src/css/repo.css          | 23 ++++++++++-------------
 5 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/templates/repo/commits.tmpl b/templates/repo/commits.tmpl
index 1647d6959..3400dbd25 100644
--- a/templates/repo/commits.tmpl
+++ b/templates/repo/commits.tmpl
@@ -3,7 +3,7 @@
 	{{template "repo/header" .}}
 	<div class="ui container">
 		{{template "repo/sub_menu" .}}
-		<div class="repo-button-row gt-df gt-ac gt-sb gt-fw gt-mb-4 gt-mt-3">
+		<div class="repo-button-row">
 			<div class="gt-df gt-ac">
 				{{template "repo/branch_dropdown" dict "root" . "ContainerClasses" "gt-mr-2"}}
 				<a href="{{.RepoLink}}/graph" class="ui basic small compact button">
diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index a679de502..a983de5a4 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -61,7 +61,7 @@
 			</div>
 		{{end}}
 		{{template "repo/sub_menu" .}}
-		<div class="repo-button-row gt-df gt-ac gt-sb gt-fw">
+		<div class="repo-button-row">
 			<div class="gt-df gt-ac gt-fw gt-gap-y-3">
 				{{template "repo/branch_dropdown" dict "root" . "ContainerClasses" "gt-mr-2"}}
 				{{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}}
@@ -84,8 +84,9 @@
 				{{end}}
 
 				{{if and .CanWriteCode .IsViewBranch (not .Repository.IsArchived)}}
-					<button class="ui basic compact dropdown jump icon button gt-mr-2"{{if not .Repository.CanEnableEditor}} disabled{{end}}>
-						<span class="text">{{.locale.Tr "repo.editor.add_file"}}</span>
+					<button class="ui dropdown basic compact jump button gt-mr-2"{{if not .Repository.CanEnableEditor}} disabled{{end}}>
+						{{.locale.Tr "repo.editor.add_file"}}
+						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						<div class="menu">
 							<a class="item" href="{{.RepoLink}}/_new/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
 								{{.locale.Tr "repo.editor.new_file"}}
@@ -99,7 +100,6 @@
 								{{.locale.Tr "repo.editor.patch"}}
 							</a>
 						</div>
-						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 					</button>
 				{{end}}
 
diff --git a/templates/repo/wiki/view.tmpl b/templates/repo/wiki/view.tmpl
index 370109caa..ee9a3b214 100644
--- a/templates/repo/wiki/view.tmpl
+++ b/templates/repo/wiki/view.tmpl
@@ -3,7 +3,7 @@
 	{{template "repo/header" .}}
 	{{$title := .title}}
 	<div class="ui container">
-		<div class="repo-button-row gt-df gt-ac gt-sb gt-fw">
+		<div class="repo-button-row">
 			<div class="gt-df gt-ac">
 				<div class="ui floating filter dropdown" data-no-results="{{.locale.Tr "repo.pulls.no_results"}}">
 					<div class="ui basic small button">
diff --git a/web_src/css/base.css b/web_src/css/base.css
index d2aa64e6e..2b62c2485 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -2099,8 +2099,8 @@ a.ui.basic.label:hover {
 }
 
 /* if a .top.attached.header is followed by a .segment, add some margin */
-.ui.segments ~ .ui.top.attached.header,
-.ui.attached.segment ~ .ui.top.attached.header {
+.ui.segments + .ui.top.attached.header,
+.ui.attached.segment + .ui.top.attached.header {
   margin-top: 1rem;
 }
 
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 674f8c9e6..546fff32f 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -2693,19 +2693,12 @@
 }
 
 .repo-button-row {
-  margin-bottom: 10px;
-}
-
-.repo-button-row > * {
-  margin-top: 8px;
-}
-
-.wiki .repo-button-row {
-  margin-bottom: 0;
-}
-
-.wiki .repo-button-row > * {
-  margin-top: 0;
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  flex-wrap: wrap;
+  justify-content: space-between;
 }
 
 .repo-button-row .button {
@@ -2713,6 +2706,10 @@
   height: 30px;
 }
 
+.repo-button-row .button.dropdown {
+  padding-right: 22px !important; /* normal buttons have !important paddings, so we need to override it for dropdown (Add File) icons */
+}
+
 .repo-button-row input {
   height: 30px;
 }