Fix button alignments (#34276)

Continue with #34206.

---------

Co-authored-by: wxiaoguang <[email protected]>
Co-authored-by: Lunny Xiao <[email protected]>

Author: 3 people

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>

templates/repo/wiki/revision.tmpl

@@ -14,7 +14,7 @@
 					</div>
 				</div>
 			</div>
-			<div>
+			<div class="flex-text-block">
 				{{template "repo/clone_panel" .}}
 			</div>
 		</div>

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 */

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>

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>