From 533b8b2d3d98f2f95b3162eebe8cbf1063f90ec1 Mon Sep 17 00:00:00 2001
From: Kerwin Bryant <kerwin612@qq.com>
Date: Mon, 28 Apr 2025 03:39:03 +0800
Subject: [PATCH] Fix button alignments (#34276)

Continue with #34206.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
---
 templates/repo/branch_dropdown.tmpl             | 14 +++++++++-----
 templates/repo/wiki/revision.tmpl               |  2 +-
 web_src/css/base.css                            |  1 +
 web_src/js/components/RepoBranchTagSelector.vue |  3 ++-
 web_src/js/components/RepoContributors.vue      |  2 +-
 5 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/templates/repo/branch_dropdown.tmpl b/templates/repo/branch_dropdown.tmpl
index 261d0ea409..36dc047c23 100644
--- a/templates/repo/branch_dropdown.tmpl
+++ b/templates/repo/branch_dropdown.tmpl
@@ -47,16 +47,20 @@ Search "repo/branch_dropdown" in the template directory to find all occurrences.
 >
 	{{/* show dummy elements before Vue componment is mounted, this code must match the code in BranchTagSelector.vue */}}
 	<div class="ui dropdown custom branch-selector-dropdown ellipsis-text-items">
-		<div class="ui button branch-dropdown-button">
+		<div class="ui compact button branch-dropdown-button">
 			<span class="flex-text-block gt-ellipsis">
-				{{if not .DropdownFixedText}}
-					{{if .ShowTabTags}}
+				{{if .DropdownFixedText}}
+					{{.DropdownFixedText}}
+				{{else}}
+					{{if eq .CurrentRefType "tag"}}
 						{{svg "octicon-tag"}}
-					{{else if .ShowTabBranches}}
+					{{else if eq .CurrentRefType "branch"}}
 						{{svg "octicon-git-branch"}}
+					{{else}}
+						{{svg "octicon-git-commit"}}
 					{{end}}
+					<strong class="tw-inline-block gt-ellipsis">{{.CurrentRefShortName}}</strong>
 				{{end}}
-				<strong class="tw-ml-2 tw-inline-block gt-ellipsis">{{Iif .DropdownFixedText .SelectedRefShortName}}</strong>
 			</span>
 			{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 		</div>
diff --git a/templates/repo/wiki/revision.tmpl b/templates/repo/wiki/revision.tmpl
index f305238fc9..108e378937 100644
--- a/templates/repo/wiki/revision.tmpl
+++ b/templates/repo/wiki/revision.tmpl
@@ -14,7 +14,7 @@
 					</div>
 				</div>
 			</div>
-			<div>
+			<div class="flex-text-block">
 				{{template "repo/clone_panel" .}}
 			</div>
 		</div>
diff --git a/web_src/css/base.css b/web_src/css/base.css
index bf7639859d..dc79f2f322 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1150,6 +1150,7 @@ table th[data-sortt-desc] .svg {
   min-width: 0;
 }
 
+.ui.dropdown > .ui.button,
 .flex-text-block > .ui.button,
 .flex-text-inline > .ui.button {
   margin: 0; /* fomantic buttons have default margin, when we use them in a flex container with gap, we do not need these margins */
diff --git a/web_src/js/components/RepoBranchTagSelector.vue b/web_src/js/components/RepoBranchTagSelector.vue
index aaef8045a0..8e3a29a0e0 100644
--- a/web_src/js/components/RepoBranchTagSelector.vue
+++ b/web_src/js/components/RepoBranchTagSelector.vue
@@ -222,7 +222,8 @@ export default defineComponent({
         <template v-if="dropdownFixedText">{{ dropdownFixedText }}</template>
         <template v-else>
           <svg-icon v-if="currentRefType === 'tag'" name="octicon-tag"/>
-          <svg-icon v-else name="octicon-git-branch"/>
+          <svg-icon v-else-if="currentRefType === 'branch'" name="octicon-git-branch"/>
+          <svg-icon v-else name="octicon-git-commit"/>
           <strong ref="dropdownRefName" class="tw-inline-block gt-ellipsis">{{ currentRefShortName }}</strong>
         </template>
       </span>
diff --git a/web_src/js/components/RepoContributors.vue b/web_src/js/components/RepoContributors.vue
index 969a869e0d..1006ea30bb 100644
--- a/web_src/js/components/RepoContributors.vue
+++ b/web_src/js/components/RepoContributors.vue
@@ -354,7 +354,7 @@ export default defineComponent({
       <div>
         <!-- Contribution type -->
         <div class="ui floating dropdown jump" id="repo-contributors">
-          <div class="ui basic compact button tw-mr-0">
+          <div class="ui basic compact button">
             <span class="not-mobile">{{ locale.filterLabel }}</span> <strong>{{ locale.contributionType[type] }}</strong>
             <svg-icon name="octicon-triangle-down" :size="14"/>
           </div>