From 3c014a8f0e6692e07869663867c7c74b1deb1aee Mon Sep 17 00:00:00 2001
From: 0ko <0ko@noreply.codeberg.org>
Date: Thu, 13 Mar 2025 18:11:01 +0000
Subject: [PATCH] ui: improve branch/tag dropdown selector consistency (#7187)

Improve consistency of these tag/branch selector menus between these areas: repo file/dir view, issue branch selection, compare page.

Improve the look slightly by aligning icons properly, adding consistent gap and ensuring consistent vertical gaps with no excessive space waste.

Preview:
https://codeberg.org/attachments/0740a811-d6bf-4c27-a16d-bdc7e2aa63eb

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7187
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
---
 templates/repo/diff/compare.tmpl              | 44 ++++++-------------
 .../sidebar/branch_selector_field.tmpl        | 22 +++-------
 web_src/css/repo.css                          | 13 ++++++
 .../js/components/RepoBranchTagSelector.vue   | 15 +------
 4 files changed, 36 insertions(+), 58 deletions(-)

diff --git a/templates/repo/diff/compare.tmpl b/templates/repo/diff/compare.tmpl
index 024577afcc..c1b00c5f9e 100644
--- a/templates/repo/diff/compare.tmpl
+++ b/templates/repo/diff/compare.tmpl
@@ -39,21 +39,13 @@
 					<i class="icon">{{svg "octicon-filter" 16}}</i>
 					<input name="search" placeholder="{{ctx.Locale.Tr "repo.filter_branch_and_tag"}}...">
 				</div>
-				<div class="header">
-					<div class="ui grid">
-						<div class="two column row">
-							<a class="reference column" href="#" data-target=".base-branch-list">
-								<span class="text black">
-									{{svg "octicon-git-branch" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.branches"}}
-								</span>
-							</a>
-							<a class="reference column" href="#" data-target=".base-tag-list">
-								<span class="text black">
-									{{svg "octicon-tag" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.tags"}}
-								</span>
-							</a>
-						</div>
-					</div>
+				<div class="branch-tag-tab">
+					<a class="branch-tag-item muted" href="#" data-target=".base-branch-list">
+						{{svg "octicon-git-branch"}}{{ctx.Locale.Tr "repo.branches"}}
+					</a>
+					<a class="branch-tag-item muted" href="#" data-target=".base-tag-list">
+						{{svg "octicon-tag"}}{{ctx.Locale.Tr "repo.tags"}}
+					</a>
 				</div>
 				<div class="scrolling menu reference-list-menu base-branch-list">
 					{{range .Branches}}
@@ -108,21 +100,13 @@
 					<i class="icon">{{svg "octicon-filter" 16}}</i>
 					<input name="search" placeholder="{{ctx.Locale.Tr "repo.filter_branch_and_tag"}}...">
 				</div>
-				<div class="header">
-					<div class="ui grid">
-						<div class="two column row">
-							<a class="reference column" href="#" data-target=".head-branch-list">
-								<span class="text black">
-									{{svg "octicon-git-branch" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.branches"}}
-								</span>
-							</a>
-							<a class="reference column" href="#" data-target=".head-tag-list">
-								<span class="text black">
-									{{svg "octicon-tag" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.tags"}}
-								</span>
-							</a>
-						</div>
-					</div>
+				<div class="branch-tag-tab">
+					<a class="branch-tag-item muted" href="#" data-target=".head-branch-list">
+						{{svg "octicon-git-branch"}}{{ctx.Locale.Tr "repo.branches"}}
+					</a>
+					<a class="branch-tag-item muted" href="#" data-target=".head-tag-list">
+						{{svg "octicon-tag"}}{{ctx.Locale.Tr "repo.tags"}}
+					</a>
 				</div>
 				<div class="scrolling menu reference-list-menu head-branch-list">
 					{{range .HeadBranches}}
diff --git a/templates/repo/issue/view_content/sidebar/branch_selector_field.tmpl b/templates/repo/issue/view_content/sidebar/branch_selector_field.tmpl
index c23e13b2b0..385fc14024 100644
--- a/templates/repo/issue/view_content/sidebar/branch_selector_field.tmpl
+++ b/templates/repo/issue/view_content/sidebar/branch_selector_field.tmpl
@@ -15,21 +15,13 @@
 			<i class="icon">{{svg "octicon-filter" 16}}</i>
 			<input name="search" placeholder="{{ctx.Locale.Tr "repo.filter_branch_and_tag"}}...">
 		</div>
-		<div class="header">
-			<div class="ui grid">
-				<div class="two column row">
-					<a class="reference column muted" href="#" data-target="#branch-list">
-						<span class="text black">
-							{{svg "octicon-git-branch" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.branches"}}
-						</span>
-					</a>
-					<a class="reference column muted" href="#" data-target="#tag-list">
-						<span class="text">
-							{{svg "octicon-tag" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.tags"}}
-						</span>
-					</a>
-				</div>
-			</div>
+		<div class="branch-tag-tab">
+			<a class="branch-tag-item muted" href="#" data-target="#branch-list">
+				{{svg "octicon-git-branch"}}{{ctx.Locale.Tr "repo.branches"}}
+			</a>
+			<a class="branch-tag-item muted" href="#" data-target="#tag-list">
+				{{svg "octicon-tag"}}{{ctx.Locale.Tr "repo.tags"}}
+			</a>
 		</div>
 		<div class="branch-tag-divider"></div>
 		<div id="branch-list" class="scrolling menu reference-list-menu {{if not .Issue}}new-issue{{end}}">
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 1b962aacb6..f498a992ed 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -1153,6 +1153,19 @@ td .commit-summary {
   text-align: center;
 }
 
+.branch-tag-tab {
+  padding: 0 10px 10px;
+}
+
+.branch-tag-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0 10px;
+  border: 1px solid transparent;
+  border-bottom: none;
+}
+
 .repository.compare.pull .comment.form .content::before,
 .repository.compare.pull .comment.form .content::after {
   right: 100%;
diff --git a/web_src/js/components/RepoBranchTagSelector.vue b/web_src/js/components/RepoBranchTagSelector.vue
index 660551b8c7..cd86499ddc 100644
--- a/web_src/js/components/RepoBranchTagSelector.vue
+++ b/web_src/js/components/RepoBranchTagSelector.vue
@@ -265,10 +265,10 @@ export default sfc; // activate IDE's Vue plugin
       </div>
       <div v-if="showBranchesInDropdown" class="branch-tag-tab">
         <a class="branch-tag-item muted" :class="{active: mode === 'branches'}" href="#" @click="handleTabSwitch('branches')">
-          <svg-icon name="octicon-git-branch" :size="16" class="tw-mr-1"/>{{ textBranches }}
+          <svg-icon name="octicon-git-branch" :size="16"/>{{ textBranches }}
         </a>
         <a v-if="!noTag" class="branch-tag-item muted" :class="{active: mode === 'tags'}" href="#" @click="handleTabSwitch('tags')">
-          <svg-icon name="octicon-tag" :size="16" class="tw-mr-1"/>{{ textTags }}
+          <svg-icon name="octicon-tag" :size="16"/>{{ textTags }}
         </a>
       </div>
       <div class="branch-tag-divider"/>
@@ -316,17 +316,6 @@ export default sfc; // activate IDE's Vue plugin
   </div>
 </template>
 <style scoped>
-.branch-tag-tab {
-  padding: 0 10px;
-}
-
-.branch-tag-item {
-  display: inline-block;
-  padding: 10px;
-  border: 1px solid transparent;
-  border-bottom: none;
-}
-
 .branch-tag-item.active {
   border-color: var(--color-secondary);
   background: var(--color-menu);