From d6fc66c06663388535242ad8def0b77d727e8a56 Mon Sep 17 00:00:00 2001
From: panc <pan0xc@foxmail.com>
Date: Sun, 15 Feb 2026 19:11:43 +0100
Subject: [PATCH] fix: improve alignment of icons in navbar (#11259)

Add `flex` or `inline-flex` to the direct parent element of the SVG icon in the navigation bar to make the overall alignment look better.

Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/11259
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Co-authored-by: panc <pan0xc@foxmail.com>
Co-committed-by: panc <pan0xc@foxmail.com>
---
 templates/base/head_navbar.tmpl | 14 +++++++-------
 web_src/css/modules/navbar.css  | 10 ++++++++++
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl
index 0d2884d5d4..e4627451cd 100644
--- a/templates/base/head_navbar.tmpl
+++ b/templates/base/head_navbar.tmpl
@@ -14,7 +14,7 @@
 		<div class="ui secondary menu item navbar-mobile-right only-mobile">
 			{{if .IsSigned}}
 			<a id="mobile-notifications-icon" class="item tw-w-auto tw-p-2" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}">
-				<div class="tw-relative">
+				<div class="notification-icon-relative">
 					{{svg "octicon-bell"}}
 					<span class="notification_count{{if not $notificationUnreadCount}} tw-hidden{{end}}">{{$notificationUnreadCount}}</span>
 				</div>
@@ -59,7 +59,7 @@
 				<summary data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
 					{{ctx.AvatarUtils.Avatar .SignedUser 24}}
 					<span class="only-mobile tw-ml-2">{{.SignedUser.Name}}</span>
-					<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
+					<span class="not-mobile dropdown-icon">{{svg "octicon-triangle-down"}}</span>
 				</summary>
 				<div class="content">
 					<span class="header">
@@ -78,8 +78,8 @@
 			</details>
 		{{else if .IsSigned}}
 			{{if EnableTimetracking}}
-			<a class="active-stopwatch-trigger item tw-mx-0{{if not .ActiveStopwatch}} tw-hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}">
-				<div class="tw-relative">
+			<a class="active-stopwatch-trigger item tw-mx-0{{if not .ActiveStopwatch}} tw-hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}" data-tippy-content="{{ctx.Locale.Tr "active_stopwatch"}}" aria-label="{{ctx.Locale.Tr "active_stopwatch"}}">
+				<div class="notification-icon-relative">
 					{{svg "octicon-stopwatch"}}
 					<span class="header-stopwatch-dot"></span>
 				</div>
@@ -113,7 +113,7 @@
 			{{end}}
 
 			<a class="item not-mobile tw-mx-0" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}">
-				<div class="tw-relative">
+				<div class="notification-icon-relative">
 					{{svg "octicon-bell"}}
 					<span class="notification_count{{if not $notificationUnreadCount}} tw-hidden{{end}}">{{$notificationUnreadCount}}</span>
 				</div>
@@ -122,7 +122,7 @@
 			<details class="dropdown dir-rtl">
 				<summary data-tooltip-content="{{ctx.Locale.Tr "create_new"}}">
 					{{svg "octicon-plus"}}
-					<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
+					<span class="not-mobile dropdown-icon">{{svg "octicon-triangle-down"}}</span>
 					<span class="only-mobile">{{ctx.Locale.Tr "create_new"}}</span>
 				</summary>
 				<div class="content">
@@ -154,7 +154,7 @@
 				<summary data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
 					{{ctx.AvatarUtils.Avatar .SignedUser 24}}
 					<span class="only-mobile tw-ml-2">{{.SignedUser.Name}}</span>
-					<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
+					<span class="not-mobile dropdown-icon">{{svg "octicon-triangle-down"}}</span>
 				</summary>
 				<div class="content">
 					<span class="header">
diff --git a/web_src/css/modules/navbar.css b/web_src/css/modules/navbar.css
index a465020fd0..0c58441dfe 100644
--- a/web_src/css/modules/navbar.css
+++ b/web_src/css/modules/navbar.css
@@ -44,6 +44,12 @@
   margin-right: 0;
 }
 
+/* icon with notification counter - positioned relative container */
+#navbar .notification-icon-relative {
+  position: relative;
+  display: flex;
+}
+
 @media (max-width: 767.98px) {
   #navbar {
     align-items: stretch;
@@ -123,6 +129,10 @@
   min-height: 38px;
 }
 
+#navbar details.dropdown .dropdown-icon {
+  display: contents;
+}
+
 #navbar a.item .notification_count {
   color: var(--color-nav-bg);
   padding: 0 3.75px;