From a7c2bf5340433e4476c79fbe8335872de55e4310 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 21 Jun 2023 00:36:19 +0200
Subject: [PATCH 1/3] Navbar fixes

---
 templates/base/head_navbar.tmpl |  6 +++---
 web_src/css/helpers.css         |  1 +
 web_src/css/modules/navbar.css  | 12 ++++++++----
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl
index 3086e674fd621..a2be0187d9c40 100644
--- a/templates/base/head_navbar.tmpl
+++ b/templates/base/head_navbar.tmpl
@@ -11,16 +11,16 @@
 		</a>
 
 		<!-- mobile right menu, it must be here because in mobile view, each item is a flex column, the first item is a full row column -->
-		<div class="ui secondary menu item navbar-mobile-right gt-gap-2">
+		<div class="ui secondary menu item navbar-mobile-right">
 			{{if .IsSigned}}
-			<a class="item mobile-right-item gt-mr-2 gt-p-3" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
+			<a id="mobile-notifications-icon" class="item gt-w-auto gt-p-3" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
 				<div class="gt-relative">
 					{{svg "octicon-bell"}}
 					<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">{{$notificationUnreadCount}}</span>
 				</div>
 			</a>
 			{{end}}
-			<button class="item mobile-right-item ui icon mini button gt-p-3 gt-m-0" id="navbar-expand-toggle">{{svg "octicon-three-bars"}}</button>
+			<button class="item gt-w-auto ui icon mini button gt-p-3 gt-m-0" id="navbar-expand-toggle">{{svg "octicon-three-bars"}}</button>
 		</div>
 
 
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index eae3d337577fb..17278ebefc2a4 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -75,6 +75,7 @@ Gitea's private styles use `g-` prefix.
 .gt-self-start { align-self: flex-start !important; }
 .gt-self-end { align-self: flex-end !important; }
 .gt-no-underline { text-decoration-line: none !important; }
+.gt-w-auto { width: auto !important; }
 
 .gt-overflow-x-auto { overflow-x: auto !important; }
 .gt-overflow-x-scroll { overflow-x: scroll !important; }
diff --git a/web_src/css/modules/navbar.css b/web_src/css/modules/navbar.css
index abc6afc69037f..c50cd33e2bbf2 100644
--- a/web_src/css/modules/navbar.css
+++ b/web_src/css/modules/navbar.css
@@ -34,6 +34,10 @@
   justify-content: center;
 }
 
+#navbar .dropdown .item {
+  justify-content: stretch;
+}
+
 #navbar a.item:hover,
 #navbar button.item:hover {
   background: var(--color-nav-hover-bg);
@@ -85,19 +89,19 @@
   #navbar.navbar-menu-open .item {
     display: flex;
     width: 100%;
+    margin: 0;
   }
   #navbar.navbar-menu-open .navbar-left #navbar-logo {
     justify-content: flex-start;
-    width: 50%;
-    min-height: 48px;
+    width: auto;
   }
   #navbar.navbar-menu-open .navbar-left .navbar-mobile-right {
     justify-content: flex-end;
     width: 50%;
     min-height: 48px;
   }
-  #navbar.navbar-menu-open .mobile-right-item {
-    width: auto !important;
+  #navbar #mobile-notifications-icon {
+    margin-right: .5rem !important;
   }
 }
 

From 27bf292c571669a0126afa041ab8e9972a22fe20 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 21 Jun 2023 00:39:47 +0200
Subject: [PATCH 2/3] tweak margin

---
 web_src/css/modules/navbar.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/css/modules/navbar.css b/web_src/css/modules/navbar.css
index c50cd33e2bbf2..d8639607692ef 100644
--- a/web_src/css/modules/navbar.css
+++ b/web_src/css/modules/navbar.css
@@ -101,7 +101,7 @@
     min-height: 48px;
   }
   #navbar #mobile-notifications-icon {
-    margin-right: .5rem !important;
+    margin-right: 14px !important;
   }
 }
 

From 3a7b22e01a1c8242dfef94f76e79bb4fc01ef691 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 21 Jun 2023 08:24:48 +0200
Subject: [PATCH 3/3] tweak margin

---
 web_src/css/modules/navbar.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/css/modules/navbar.css b/web_src/css/modules/navbar.css
index d8639607692ef..66c7f9ec789ca 100644
--- a/web_src/css/modules/navbar.css
+++ b/web_src/css/modules/navbar.css
@@ -101,7 +101,7 @@
     min-height: 48px;
   }
   #navbar #mobile-notifications-icon {
-    margin-right: 14px !important;
+    margin-right: 6px !important;
   }
 }