Fix mobile navbar and misc cleanups (#25134) (#25169)

Backport #25134 by @silverwind

- Fix and improve mobile navbar layout
- Apply all cleanups suggested in
https://github.com/go-gitea/gitea/pull/25111
- Make media query breakpoints match Fomantic's exactly
- Clean up whitespace in class on navbar items

Mobile navbar before and after:
<img width="745" alt="Screenshot 2023-06-08 at 08 40 56"
src="https://github.com/go-gitea/gitea/assets/115237/ca84b239-b10f-41db-8c06-dcf2b6dd9d28">
<img width="739" alt="Screenshot 2023-06-08 at 08 41 23"
src="https://github.com/go-gitea/gitea/assets/115237/09133c54-eb7e-4110-858c-ead23c3b7521">

23 files changed, 218 insertions, 260 deletions

diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl
index e435fd67ca..5e41636ba3 100644
--- a/templates/base/head_navbar.tmpl
+++ b/templates/base/head_navbar.tmpl
@@ -1,70 +1,67 @@
-<nav class="ui container secondary stackable main menu" id="navbar" aria-label="{{.locale.Tr "aria.navbar"}}">
-	{{$notificationUnreadCount := 0}}
-	{{if .IsSigned}}
-		{{if .NotificationUnreadCount}}{{$notificationUnreadCount = call .NotificationUnreadCount}}{{end}}
-	{{end}}
-	<div class="item brand gt-sb">
+{{$notificationUnreadCount := 0}}
+{{if and .IsSigned .NotificationUnreadCount}}
+	{{$notificationUnreadCount = call .NotificationUnreadCount}}
+{{end}}
+
+<nav id="navbar" class="ui secondary stackable menu" aria-label="{{.locale.Tr "aria.navbar"}}">
+	<div class="item">
+		<!-- the logo -->
 		<a href="{{AppSubUrl}}/" aria-label="{{if .IsSigned}}{{.locale.Tr "dashboard"}}{{else}}{{.locale.Tr "home"}}{{end}}">
 			<img width="30" height="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{.locale.Tr "logo"}}" aria-hidden="true">
 		</a>
-		<div class="gt-df gt-ac">
+
+		<!-- 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 navbar-mobile-right gt-gap-2">
 			{{if .IsSigned}}
-			<a href="{{AppSubUrl}}/notifications" class="mobile-only gt-mr-4 gt-mt-3" data-tooltip-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
-				<span class="fitted item">
+			<a class="item gt-mx-0 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>
-				</span>
+					<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">{{$notificationUnreadCount}}</span>
+				</div>
 			</a>
 			{{end}}
-			<button class="ui icon button mobile-only" id="navbar-expand-toggle">
-				{{svg "octicon-three-bars"}}
-			</button>
+			<button class="item ui icon mini button gt-p-3 gt-m-0" id="navbar-expand-toggle">{{svg "octicon-three-bars"}}</button>
 		</div>
 	</div>
 
+	<!-- navbar links -->
 	{{if and .IsSigned .MustChangePassword}}
 		{{/* No links */}}
 	{{else if .IsSigned}}
 		{{if not .UnitIssuesGlobalDisabled}}
-		<a class="item {{if .PageIsIssues}}active{{end}}" href="{{AppSubUrl}}/issues">{{.locale.Tr "issues"}}</a>
+			<a class="item{{if .PageIsIssues}} active{{end}}" href="{{AppSubUrl}}/issues">{{.locale.Tr "issues"}}</a>
 		{{end}}
 		{{if not .UnitPullsGlobalDisabled}}
-		<a class="item {{if .PageIsPulls}}active{{end}}" href="{{AppSubUrl}}/pulls">{{.locale.Tr "pull_requests"}}</a>
+			<a class="item{{if .PageIsPulls}} active{{end}}" href="{{AppSubUrl}}/pulls">{{.locale.Tr "pull_requests"}}</a>
 		{{end}}
 		{{if not (and .UnitIssuesGlobalDisabled .UnitPullsGlobalDisabled)}}
-		{{if .ShowMilestonesDashboardPage}}<a class="item {{if .PageIsMilestonesDashboard}}active{{end}}" href="{{AppSubUrl}}/milestones">{{.locale.Tr "milestones"}}</a>{{end}}
+			{{if .ShowMilestonesDashboardPage}}
+				<a class="item{{if .PageIsMilestonesDashboard}} active{{end}}" href="{{AppSubUrl}}/milestones">{{.locale.Tr "milestones"}}</a>
+			{{end}}
 		{{end}}
-		<a class="item {{if .PageIsExplore}}active{{end}}" href="{{AppSubUrl}}/explore/repos">{{.locale.Tr "explore"}}</a>
+		<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/repos">{{.locale.Tr "explore"}}</a>
 	{{else if .IsLandingPageOrganizations}}
-		<a class="item {{if .PageIsExplore}}active{{end}}" href="{{AppSubUrl}}/explore/organizations">{{.locale.Tr "explore"}}</a>
+		<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/organizations">{{.locale.Tr "explore"}}</a>
 	{{else}}
-		<a class="item {{if .PageIsExplore}}active{{end}}" href="{{AppSubUrl}}/explore/repos">{{.locale.Tr "explore"}}</a>
+		<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/repos">{{.locale.Tr "explore"}}</a>
 	{{end}}
 
 	{{template "custom/extra_links" .}}
 
-	{{/* TODO
-		<div class="item">
-		<div class="ui icon input">
-		<input class="searchbox" type="text" placeholder="{{.locale.Tr "search_project"}}">
-		<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
-		</div>
-		</div>
-	*/}}
-
+	{{if not .IsSigned}}
+		<a class="item" target="_blank" rel="noopener noreferrer" href="https://docs.gitea.io">{{.locale.Tr "help"}}</a>
+	{{end}}
 
-	{{if and .IsSigned .MustChangePassword}}
-		<div class="right stackable menu">
-			<div class="ui dropdown jump item" tabindex="-1" data-tooltip-content="{{.locale.Tr "user_profile_and_more"}}">
-				<span class="text">
-					{{avatar $.Context .SignedUser 24 "tiny"}}
-					<span class="sr-only">{{.locale.Tr "user_profile_and_more"}}</span>
-					<span class="mobile-only">{{.SignedUser.Name}}</span>
-					<span class="fitted not-mobile" tabindex="-1">{{svg "octicon-triangle-down"}}</span>
+	<!-- the full dropdown menus -->
+	<div class="right menu">
+		{{if and .IsSigned .MustChangePassword}}
+			<div class="ui dropdown jump item" data-tooltip-content="{{.locale.Tr "user_profile_and_more"}}">
+				<span class="text gt-df gt-ac">
+					{{avatar $.Context .SignedUser 24 "gt-mr-2"}}
+					<span class="mobile-only gt-ml-2">{{.SignedUser.Name}}</span>
+					<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
 				</span>
-				<div class="menu user-menu" tabindex="-1">
+				<div class="menu user-menu">
 					<div class="ui header">
 						{{.locale.Tr "signed_in_as"}} <strong>{{.SignedUser.Name}}</strong>
 					</div>
@@ -72,22 +69,20 @@
 					<div class="divider"></div>
 					<a class="item link-action" href data-url="{{AppSubUrl}}/user/logout" data-redirect="{{AppSubUrl}}/">
 						{{svg "octicon-sign-out"}}
-						{{.locale.Tr "sign_out"}}<!-- Sign Out -->
+						{{.locale.Tr "sign_out"}}
 					</a>
 				</div><!-- end content avatar menu -->
 			</div><!-- end dropdown avatar menu -->
-		</div>
-	{{else if .IsSigned}}
-		<div class="right stackable menu gt-mr-4">
+		{{else if .IsSigned}}
 			{{if EnableTimetracking}}
-			<a class="active-stopwatch-trigger item ui gt-mx-0{{if not .ActiveStopwatch}} gt-hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}">
-				<span class="fitted gt-relative">
+			<a class="active-stopwatch-trigger item ui gt-mx-0{{if not .ActiveStopwatch}} gt-hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}" title="{{.locale.Tr "active_stopwatch"}}">
+				<div class="gt-relative">
 					{{svg "octicon-stopwatch"}}
 					<span class="header-stopwatch-dot"></span>
-					<span class="sr-mobile-only">{{.locale.Tr "active_stopwatch"}}</span>
-				</span>
+				</div>
+				<span class="mobile-only gt-ml-2">{{.locale.Tr "active_stopwatch"}}</span>
 			</a>
-			<div class="active-stopwatch-popup tippy-target">
+			<div class="active-stopwatch-popup tippy-target gt-p-3">
 				<div class="gt-df gt-ac">
 					<a class="stopwatch-link gt-df gt-ac" href="{{.ActiveStopwatch.IssueLink}}">
 						{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
@@ -100,7 +95,7 @@
 						{{.CsrfTokenHtml}}
 						<button
 							type="submit"
-							class="ui button mini compact basic icon fitted"
+							class="ui button mini compact basic icon"
 							data-tooltip-content="{{.locale.Tr "repo.issues.stop_tracking"}}"
 						>{{svg "octicon-square-fill"}}</button>
 					</form>
@@ -108,7 +103,7 @@
 						{{.CsrfTokenHtml}}
 						<button
 							type="submit"
-							class="ui button mini compact basic icon fitted"
+							class="ui button mini compact basic icon"
 							data-tooltip-content="{{.locale.Tr "repo.issues.cancel_tracking"}}"
 						>{{svg "octicon-trash"}}</button>
 					</form>
@@ -117,45 +112,42 @@
 			{{end}}
 
 			<a href="{{AppSubUrl}}/notifications" class="item not-mobile gt-mx-0" data-tooltip-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
-				<span class="fitted item">
+				<div class="gt-relative">
 					{{svg "octicon-bell"}}
-					<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">
-						{{$notificationUnreadCount}}
-					</span>
-				</span>
+					<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">{{$notificationUnreadCount}}</span>
+				</div>
 			</a>
 
 			<div class="ui dropdown jump item gt-mx-0 gt-pr-3" data-tooltip-content="{{.locale.Tr "create_new"}}">
 				<span class="text">
-					<span class="fitted">{{svg "octicon-plus"}}</span>
-					<span class="sr-mobile-only">{{.locale.Tr "create_new"}}</span>
-					<span class="fitted not-mobile">{{svg "octicon-triangle-down"}}</span>
+					{{svg "octicon-plus"}}
+					<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
+					<span class="mobile-only">{{.locale.Tr "create_new"}}</span>
 				</span>
 				<div class="menu">
 					<a class="item" href="{{AppSubUrl}}/repo/create">
-						<span class="fitted">{{svg "octicon-plus"}}</span> {{.locale.Tr "new_repo"}}
+						{{svg "octicon-plus"}} {{.locale.Tr "new_repo"}}
 					</a>
 					{{if not .DisableMigrations}}
 						<a class="item" href="{{AppSubUrl}}/repo/migrate">
-							<span class="fitted">{{svg "octicon-repo-push"}}</span> {{.locale.Tr "new_migrate"}}
+							{{svg "octicon-repo-push"}} {{.locale.Tr "new_migrate"}}
 						</a>
 					{{end}}
 					{{if .SignedUser.CanCreateOrganization}}
 					<a class="item" href="{{AppSubUrl}}/org/create">
-						<span class="fitted">{{svg "octicon-organization"}}</span> {{.locale.Tr "new_org"}}
+						{{svg "octicon-organization"}} {{.locale.Tr "new_org"}}
 					</a>
 					{{end}}
 				</div><!-- end content create new menu -->
 			</div><!-- end dropdown menu create new -->
 
 			<div class="ui dropdown jump item gt-mx-0 gt-pr-3" data-tooltip-content="{{.locale.Tr "user_profile_and_more"}}">
-				<span class="text">
-					{{avatar $.Context .SignedUser 24 "tiny"}}
-					<span class="sr-only">{{.locale.Tr "user_profile_and_more"}}</span>
-					<span class="mobile-only">{{.SignedUser.Name}}</span>
-					<span class="fitted not-mobile" tabindex="-1">{{svg "octicon-triangle-down"}}</span>
+				<span class="text gt-df gt-ac">
+					{{avatar $.Context .SignedUser 24 "gt-mr-2"}}
+					<span class="mobile-only gt-ml-2">{{.SignedUser.Name}}</span>
+					<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
 				</span>
-				<div class="menu user-menu" tabindex="-1">
+				<div class="menu user-menu">
 					<div class="ui header">
 						{{.locale.Tr "signed_in_as"}} <strong>{{.SignedUser.Name}}</strong>
 					</div>
@@ -163,7 +155,7 @@
 					<div class="divider"></div>
 					<a class="item" href="{{.SignedUser.HomeLink}}">
 						{{svg "octicon-person"}}
-						{{.locale.Tr "your_profile"}}<!-- Your profile -->
+						{{.locale.Tr "your_profile"}}
 					</a>
 					{{if not .DisableStars}}
 						<a class="item" href="{{.SignedUser.HomeLink}}?tab=stars">
@@ -173,15 +165,15 @@
 					{{end}}
 					<a class="item" href="{{AppSubUrl}}/notifications/subscriptions">
 						{{svg "octicon-bell"}}
-						{{.locale.Tr "notification.subscriptions"}}<!-- Subscriptions -->
+						{{.locale.Tr "notification.subscriptions"}}
 					</a>
 					<a class="{{if .PageIsUserSettings}}active {{end}}item" href="{{AppSubUrl}}/user/settings">
 						{{svg "octicon-tools"}}
-						{{.locale.Tr "your_settings"}}<!-- Your settings -->
+						{{.locale.Tr "your_settings"}}
 					</a>
 					<a class="item" target="_blank" rel="noopener noreferrer" href="https://docs.gitea.io">
 						{{svg "octicon-question"}}
-						{{.locale.Tr "help"}}<!-- Help -->
+						{{.locale.Tr "help"}}
 					</a>
 					{{if .IsAdmin}}
 						<div class="divider"></div>
@@ -199,10 +191,7 @@
 					</a>
 				</div><!-- end content avatar menu -->
 			</div><!-- end dropdown avatar menu -->
-		</div><!-- end signed user right menu -->
-	{{else}}
-		<a class="item" target="_blank" rel="noopener noreferrer" href="https://docs.gitea.io">{{.locale.Tr "help"}}</a>
-		<div class="right stackable menu">
+		{{else}}
 			{{if .ShowRegistrationButton}}
 				<a class="item{{if .PageIsSignUp}} active{{end}}" href="{{AppSubUrl}}/user/sign_up">
 					{{svg "octicon-person"}} {{.locale.Tr "register"}}
@@ -211,6 +200,6 @@
 			<a class="item{{if .PageIsSignIn}} active{{end}}" rel="nofollow" href="{{AppSubUrl}}/user/login{{if not .PageIsSignIn}}?redirect_to={{.CurrentURL}}{{end}}">
 				{{svg "octicon-sign-in"}} {{.locale.Tr "sign_in"}}
 			</a>
-		</div><!-- end anonymous user right menu -->
-	{{end}}
+		{{end}}
+	</div><!-- end full right menu -->
 </nav>
diff --git a/templates/org/home.tmpl b/templates/org/home.tmpl
index 97047c71cc..d540f80352 100644
--- a/templates/org/home.tmpl
+++ b/templates/org/home.tmpl
@@ -19,7 +19,7 @@
 				{{if .Org.Website}}<div class="item">{{svg "octicon-link"}} <a target="_blank" rel="noopener noreferrer me" href="{{.Org.Website}}">{{.Org.Website}}</a></div>{{end}}
 			</div>
 		</div>
-		<div class="right stackable menu">
+		<div class="right menu">
 			<form method="post" action="{{.Link}}?action={{if $.IsFollowing}}unfollow{{else}}follow{{end}}&redirect_to={{$.Link}}">
 				{{$.CsrfTokenHtml}}
 				<button type="submit" class="ui basic button gt-mr-0">
diff --git a/templates/repo/settings/lfs_file_find.tmpl b/templates/repo/settings/lfs_file_find.tmpl
index 21709e7b33..b85f67fb43 100644
--- a/templates/repo/settings/lfs_file_find.tmpl
+++ b/templates/repo/settings/lfs_file_find.tmpl
@@ -29,7 +29,6 @@
 										<a class="ui primary sha label" href="{{$.RepoLink}}/commit/{{.String}}">{{ShortSha .String}}</a>
 									{{end}}
 								{{end}}
-								<div class="mobile-only"></div>
 								{{$.locale.Tr "repo.diff.commit"}}
 								<a class="ui primary sha label" href="{{$.RepoLink}}/commit/{{.SHA}}">{{ShortSha .SHA}}</a>
 							</td>
diff --git a/templates/status/500.tmpl b/templates/status/500.tmpl
index dbe6ab7c89..b934910fe4 100644
--- a/templates/status/500.tmpl
+++ b/templates/status/500.tmpl
@@ -15,14 +15,16 @@
 </head>
 <body>
 	<div class="full height">
-		<nav class="ui container secondary stackable main menu" id="navbar">
+		<nav class="ui secondary menu gt-border-secondary-bottom">
 			<div class="ui container gt-df">
-				<div class="item brand gt-f1">
+				<div class="item gt-f1">
 					<a href="{{AppSubUrl}}/" aria-label="{{.locale.Tr "home"}}">
 						<img width="30" height="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{.locale.Tr "logo"}}" aria-hidden="true">
 					</a>
 				</div>
-				<button class="item ui icon button">{{svg "octicon-three-bars"}}</button>{{/* a fake button to make the UI looks better*/}}
+				<div class="item">
+					<button class="ui icon button disabled">{{svg "octicon-three-bars"}}</button>{{/* a fake button to make the UI looks better*/}}
+				</div>
 			</div>
 		</nav>
 		<div role="main" class="page-content status-page-500">
diff --git a/templates/user/dashboard/navbar.tmpl b/templates/user/dashboard/navbar.tmpl
index 20b66b2ec3..79212d82a5 100644
--- a/templates/user/dashboard/navbar.tmpl
+++ b/templates/user/dashboard/navbar.tmpl
@@ -77,7 +77,7 @@
 		{{end}}
 
 	{{if .ContextUser.IsOrganization}}
-		<div class="right stackable menu">
+		<div class="right menu">
 			<a class="{{if .PageIsNews}}active {{end}}item gt-ml-auto" href="{{.ContextUser.DashboardLink}}{{if .Team}}/{{PathEscape .Team.Name}}{{end}}">
 				{{svg "octicon-rss"}}&nbsp;{{.locale.Tr "activities"}}
 			</a>
diff --git a/web_src/css/admin.css b/web_src/css/admin.css
index 617462542a..792b76d3e2 100644
--- a/web_src/css/admin.css
+++ b/web_src/css/admin.css
@@ -20,7 +20,7 @@
   width: calc(100% - 245px);
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .admin dl.admin-dl-horizontal dd {
     width: calc(100% - 185px);
   }
@@ -40,7 +40,7 @@
   white-space: nowrap;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .admin dl.admin-dl-horizontal dt {
     width: 160px;
   }
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 1c7a239188..f4b3cee5ab 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -941,7 +941,7 @@ img.ui.avatar,
   }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .page-content .ui.ui.ui.container:not(.fluid) {
     width: calc(100vw - 16px);
     max-width: calc(100vw - 16px);
@@ -961,46 +961,91 @@ img.ui.avatar,
   margin: 0 !important;
 }
 
-#navbar .column .menu {
-  margin-top: 0;
+#navbar a.item:hover {
+  background: var(--color-nav-hover-bg);
+}
+
+#navbar .navbar-mobile-right {
+  margin-left: auto;
 }
 
-#navbar .fitted .svg {
+#navbar .navbar-mobile-right a.item:hover {
+  background: transparent;
+}
+
+#navbar .secondary.menu > .item > .svg,
+#navbar .right.menu > .item > .svg {
   margin-right: 0;
-  vertical-align: middle;
 }
 
-#navbar .searchbox {
-  background-color: var(--color-input-background) !important;
+@media (max-width: 767.98px) {
+  /* hide all items */
+  #navbar .item {
+    display: none;
+  }
+  /* show the first navbar item (logo and its mobile right items) */
+  #navbar > .item:first-child {
+    display: flex;
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
+  #navbar .navbar-mobile-right > .item {
+    display: flex;
+  }
+  /* show items if the navbar is open */
+  #navbar.navbar-menu-open .item {
+    display: flex;
+  }
+  #navbar.navbar-menu-open > .item:first-child {
+    padding-bottom: 0;
+  }
 }
 
-#navbar .text .svg {
-  width: 16px;
-  text-align: center;
+@media (min-width: 767.98px) {
+  #navbar .navbar-mobile-right,
+  #navbar .mobile-only {
+    display: none;
+  }
+  #navbar .right.menu {
+    padding-right: 1em;
+  }
 }
 
-#navbar a.item:hover {
-  background: var(--color-nav-hover-bg);
+#navbar .navbar-mobile-right .item {
+  width: auto !important;
 }
 
-#navbar .dropdown .avatar {
-  margin-right: 0 !important;
+#navbar a.item .notification_count {
+  color: var(--color-nav-bg);
+  padding: 0 3.75px;
+  font-size: 12px;
+  line-height: 12px;
+  font-weight: var(--font-weight-bold);
 }
 
-@media (max-width: 767px) {
-  #navbar:not(.shown) > *:not(:first-child) {
-    display: none;
-  }
+#navbar a.item:hover .notification_count,
+#navbar a.item:hover .header-stopwatch-dot {
+  border-color: var(--color-nav-hover-bg);
 }
 
-.right.stackable.menu {
-  /* responsive fix: this makes sure that the right menu when the page */
-  /* is on mobile view will have elements stacked on top of each other. */
-  /* no, stackable won't work on right menus. */
-  margin-left: auto;
+#navbar a.item .notification_count,
+#navbar a.item .header-stopwatch-dot {
+  background: var(--color-primary);
+  border: 2px solid var(--color-nav-bg);
+  position: absolute;
+  left: 6px;
+  top: -9px;
+  min-width: 17px;
+  min-height: 17px;
+  border-radius: 17px;
   display: flex;
-  align-items: inherit;
-  flex-direction: inherit;
+  align-items: center;
+  justify-content: center;
+}
+
+#navbar .right.menu {
+  width: 100%;
+  justify-content: flex-end;
 }
 
 .ui.pagination.menu .active.item {
@@ -1455,7 +1500,7 @@ img.ui.avatar,
   line-height: 20px;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .ui.pagination.menu .item:not(.active,.navigation),
   .ui.pagination.menu .item.navigation span.navigation_label {
     display: none;
@@ -1529,56 +1574,13 @@ img.ui.avatar,
   text-align: center;
 }
 
-/* Conditional display */
-@media (min-width: 768px) {
-  .mobile-only,
-  .ui.button.mobile-only {
-    display: none !important;
-  }
-
-  /* has the same behaviour of sr-only, hiding the content for */
-  /* non-screenreaders, but is shown on mobile devices. */
-  .sr-mobile-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    border: 0;
-  }
-}
-
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   /* double selector so it wins over .gt-df etc */
   .not-mobile.not-mobile {
     display: none !important;
   }
 }
 
-/* Accessibility for screen readers */
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}
-
-.sr-only-focusable:active,
-.sr-only-focusable:focus {
-  position: static;
-  width: auto;
-  height: auto;
-  margin: 0;
-  overflow: visible;
-  clip: auto;
-}
-
 .ui.menu.new-menu {
   margin-bottom: 15px;
   background: var(--color-header-wrapper);
@@ -1613,7 +1615,7 @@ img.ui.avatar,
   margin-bottom: 0 !important; /* reset fomantic's margin, because the active menu has special bottom border */
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .ui.menu.new-menu .item {
     width: auto !important;
   }
@@ -2124,40 +2126,6 @@ a.ui.basic.label:hover {
   margin-top: 1rem;
 }
 
-.header-stopwatch-dot {
-  position: absolute;
-  left: 8px;
-  top: -8px;
-  width: 13px;
-  height: 13px;
-  background: var(--color-primary);
-  border: 2px solid var(--color-nav-bg);
-  border-radius: 100%;
-}
-
-.notification_count {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  left: 6px;
-  top: -8px;
-  min-width: 17px;
-  min-height: 17px;
-  background: var(--color-primary);
-  border: 2px solid var(--color-nav-bg);
-  color: var(--color-nav-bg);
-  border-radius: 17px;
-  padding: 0 3.5px;
-  font-size: 12px;
-  line-height: 12px;
-  font-weight: var(--font-weight-bold);
-}
-
-#navbar a.item:hover .notification_count {
-  border-color: var(--color-nav-hover-bg);
-}
-
 .rss-icon {
   display: inline-flex;
   color: var(--color-text-light-1);
diff --git a/web_src/css/dashboard.css b/web_src/css/dashboard.css
index 72c29f6686..34428c5999 100644
--- a/web_src/css/dashboard.css
+++ b/web_src/css/dashboard.css
@@ -35,7 +35,7 @@
   width: 15%;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .dashboard.feeds .filter.menu .item .floating.label,
   .dashboard.issues .filter.menu .item .floating.label {
     top: 10px;
@@ -60,7 +60,7 @@
   left: auto !important;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .dashboard.feeds .filter.menu,
   .dashboard.issues .filter.menu {
     width: 100%;
@@ -90,7 +90,7 @@
   max-width: 100%;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .dashboard .dashboard-navbar .ui.dropdown > .menu {
     position: static;
   }
diff --git a/web_src/css/form.css b/web_src/css/form.css
index a6106016b5..9527ef9d46 100644
--- a/web_src/css/form.css
+++ b/web_src/css/form.css
@@ -197,7 +197,7 @@ textarea:focus,
   }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   #create-page-form form .optional .title {
     margin-left: 15px;
   }
@@ -315,7 +315,7 @@ textarea:focus,
   }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .user.activate form .optional .title,
   .user.forgot.password form .optional .title,
   .user.reset.password form .optional .title,
@@ -353,7 +353,7 @@ textarea:focus,
   width: 200px;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .user.activate form .inline.field > label,
   .user.forgot.password form .inline.field > label,
   .user.reset.password form .inline.field > label,
@@ -449,7 +449,7 @@ textarea:focus,
   }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repository.new.repo form .optional .title,
   .repository.new.migrate form .optional .title,
   .repository.new.fork form .optional .title {
@@ -483,7 +483,7 @@ textarea:focus,
   width: 50% !important;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repository.new.repo form label,
   .repository.new.migrate form label,
   .repository.new.fork form label,
@@ -516,7 +516,7 @@ textarea:focus,
   width: 50% !important;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repository.new.repo .ui.form .selection.dropdown:not(.owner) {
     width: 100% !important;
   }
@@ -534,7 +534,7 @@ textarea:focus,
   font-family: var(--fonts-monospace);
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .new.org .ui.form .field button,
   .new.org .ui.form .field a {
     margin-bottom: 1em;
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index 14ef64b252..bed18fe93a 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -260,7 +260,7 @@ Gitea's private styles use `g-` prefix.
 .gt-font-17 { font-size: 17px !important }
 .gt-font-18 { font-size: 18px !important }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .gt-db-small { display: block !important; }
   .gt-w-100-small { width: 100% !important; }
   .gt-js-small { justify-content: flex-start !important; }
diff --git a/web_src/css/home.css b/web_src/css/home.css
index 0094acc75f..a46c46ffde 100644
--- a/web_src/css/home.css
+++ b/web_src/css/home.css
@@ -2,7 +2,7 @@
   max-width: 220px;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .home .hero h1 {
     font-size: 3.5em;
   }
diff --git a/web_src/css/modules/tippy.css b/web_src/css/modules/tippy.css
index 8919abfec0..bd55b9d6b9 100644
--- a/web_src/css/modules/tippy.css
+++ b/web_src/css/modules/tippy.css
@@ -25,8 +25,8 @@
 }
 
 .tippy-box[data-theme="menu"] {
-  background-color: transparent;
-  color: var(--color-tooltip-text);
+  background-color: var(--color-menu);
+  color: var(--color-text);
 }
 
 .tippy-content {
diff --git a/web_src/css/org.css b/web_src/css/org.css
index eb2dd8a4d9..7b73d8e572 100644
--- a/web_src/css/org.css
+++ b/web_src/css/org.css
@@ -31,7 +31,7 @@
   }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   #create-page-form form .optional .title {
     margin-left: 15px;
   }
@@ -77,7 +77,7 @@
   }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .organization.new.org form .optional .title {
     margin-left: 15px;
   }
@@ -222,7 +222,7 @@
   height: 60px;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .organization.teams #repo-top-segment {
     height: 100px;
   }
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index c6655a8fc9..ff999ed132 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -194,13 +194,13 @@
   width: 320px;
 }
 
-@media (min-width: 768px) and (max-width: 991px) {
+@media (min-width: 768px) and (max-width: 991.98px) {
   .repository #clone-panel #repo-clone-url {
     width: 200px;
   }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repository #clone-panel #repo-clone-url {
     width: 200px;
   }
@@ -298,7 +298,7 @@
   }
 }
 
-@media (min-width: 768px) and (max-width: 991px) {
+@media (min-width: 768px) and (max-width: 991.98px) {
   .repository.file.list #repo-files-table td.name {
     max-width: 300px;
   }
@@ -321,7 +321,7 @@
   }
 }
 
-@media (min-width: 768px) and (max-width: 991px) {
+@media (min-width: 768px) and (max-width: 991.98px) {
   .repository.file.list #repo-files-table td.message {
     max-width: 250px;
   }
@@ -643,7 +643,7 @@
   display: flex;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repository.view.issue .issue-title {
     flex-direction: column;
   }
@@ -939,7 +939,7 @@
   border: 1px solid var(--color-light-border);
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repository.view.issue .comment-list .timeline-item .ui.segments {
     margin-left: -2rem;
   }
@@ -964,7 +964,7 @@
   border-radius: var(--border-radius);
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repository.view.issue .comment-list .comment .content .form .button {
     width: 100%;
     margin: 0;
@@ -987,7 +987,7 @@
   margin-bottom: -0.25rem;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repository.view.issue .comment-list .comment .merge-section .item-section {
     align-items: flex-start;
     flex-direction: column;
@@ -1133,7 +1133,7 @@
   box-shadow: none;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repository.view.issue .comment-list {
     padding: 1rem 0 !important; /* Important is required here to override existing fomantic styles. */
   }
@@ -1597,7 +1597,7 @@
   line-height: 30px;
 }
 
-@media (max-width: 991px) {
+@media (max-width: 991.98px) {
   .repository .diff-detail-box {
     flex-direction: column;
     align-items: flex-start;
@@ -1853,7 +1853,7 @@
 }
 
 
-@media (max-width: 991px) {
+@media (max-width: 991.98px) {
   .diff-file-box {
     scroll-margin-top: 77px; /* match .repository .diff-detail-box */
   }
@@ -1961,14 +1961,14 @@
   display: inline-block;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repository.wiki .dividing.header .stackable.grid .button {
     margin-top: 2px;
     margin-bottom: 2px;
   }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repository.wiki #clone-panel #repo-clone-url {
     width: 160px;
   }
@@ -2269,7 +2269,7 @@
   border-radius: 0;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repository .repository-summary .segment.language-stats {
     display: none;
   }
@@ -2296,7 +2296,7 @@
   width: 500px;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   #cite-repo-modal #citation-panel {
     width: 100%;
   }
@@ -2757,7 +2757,7 @@ tbody.commit-list {
   display: inline-block;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   tr.commit-list {
     width: 100%;
   }
@@ -2770,7 +2770,7 @@ tbody.commit-list {
   }
 }
 
-@media (min-width: 768px) and (max-width: 991px) {
+@media (min-width: 768px) and (max-width: 991.98px) {
   tr.commit-list {
     width: 723px;
   }
@@ -2866,7 +2866,7 @@ tbody.commit-list {
   word-break: break-word;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repo-header + .container {
     margin-top: 7px;
   }
@@ -2880,7 +2880,7 @@ tbody.commit-list {
   word-break: keep-all;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repo-buttons {
     margin-top: 1em;
   }
@@ -2927,7 +2927,7 @@ tbody.commit-list {
   pointer-events: none !important;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repo-buttons .ui.labeled.button .svg {
     display: none;
   }
@@ -3025,7 +3025,7 @@ tbody.commit-list {
   color: var(--color-primary);
 }
 
-@media (max-width: 991px) {
+@media (max-width: 991.98px) {
   #diff-file-tree {
     display: none !important;
   }
@@ -3103,7 +3103,7 @@ tbody.commit-list {
   z-index: 7;
 }
 
-@media (max-width: 991px) {
+@media (max-width: 991.98px) {
   .ui.attached.header.diff-file-header.sticky-2nd-row {
     top: 77px; /* match .repository .diff-detail-box */
   }
@@ -3142,7 +3142,7 @@ tbody.commit-list {
   overflow: hidden;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repository-summary-language-stats {
     height: auto;
   }
@@ -3223,7 +3223,7 @@ tbody.commit-list {
   box-shadow: 0 0.5rem 1rem var(--color-shadow) !important;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repository.file.list #repo-files-table .entry,
   .repository.file.list #repo-files-table .commit-list {
     align-items: center;
@@ -3345,13 +3345,13 @@ tbody.commit-list {
   vertical-align: bottom !important;
 }
 
-@media (min-width: 768px) and (max-width: 991px) {
+@media (min-width: 768px) and (max-width: 991.98px) {
   .branch-dropdown-button {
     max-width: 185px;
   }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .branch-dropdown-button {
     max-width: 165px;
   }
@@ -3385,7 +3385,7 @@ tbody.commit-list {
   justify-content: flex-end;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .pr-status .status-details {
     flex-direction: column;
     align-items: flex-end;
diff --git a/web_src/css/repo/linebutton.css b/web_src/css/repo/linebutton.css
index a475138e6b..1e5e51eac5 100644
--- a/web_src/css/repo/linebutton.css
+++ b/web_src/css/repo/linebutton.css
@@ -16,7 +16,7 @@
   position: absolute;
   font-family: var(--fonts-regular);
   left: 0;
-  transform: translateX(-70%);
+  transform: translateX(-50%);
   cursor: pointer;
 }
 
diff --git a/web_src/css/repo/release-tag.css b/web_src/css/repo/release-tag.css
index e786e5ff59..c537a7cfe0 100644
--- a/web_src/css/repo/release-tag.css
+++ b/web_src/css/repo/release-tag.css
@@ -119,7 +119,7 @@
   }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repository.new.release .field button {
     margin-bottom: 1em;
   }
diff --git a/web_src/css/review.css b/web_src/css/review.css
index d44e98584e..4b35764c7a 100644
--- a/web_src/css/review.css
+++ b/web_src/css/review.css
@@ -67,7 +67,7 @@
   max-width: 820px;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .comment-code-cloud {
     max-width: none;
     padding: 0.75rem !important;
@@ -91,7 +91,7 @@
   padding: 0;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .comment-code-cloud .comments .comment {
     display: flex;
   }
@@ -182,7 +182,7 @@
   display: block;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .comment-code-cloud .button {
     width: 100%;
     margin: 0 !important;
@@ -252,7 +252,7 @@
   scroll-margin-top: 99px;
 }
 
-@media (max-width: 991px) {
+@media (max-width: 991.98px) {
   .pull.files.diff .comment {
     scroll-margin-top: 130px;
   }
diff --git a/web_src/css/user.css b/web_src/css/user.css
index 7b6db8f2f8..54a966e7cb 100644
--- a/web_src/css/user.css
+++ b/web_src/css/user.css
@@ -48,13 +48,13 @@
   height: auto;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .user.profile .ui.card #profile-avatar img {
     width: 30vw;
   }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .user.profile .ui.card {
     width: 100%;
   }
diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index ee7d805e77..25a94c1fa7 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -12,7 +12,6 @@
         </div>
         <a class="gt-df gt-ac muted" :href="subUrl + '/repo/create' + (isOrganization ? '?org=' + organizationId : '')" :data-tooltip-content="textNewRepo">
           <svg-icon name="octicon-plus"/>
-          <span class="sr-only">{{ textNewRepo }}</span>
         </a>
       </h4>
       <div class="ui attached segment repos-search">
@@ -121,7 +120,6 @@
         </div>
         <a class="gt-df gt-ac muted" v-if="canCreateOrganization" :href="subUrl + '/org/create'" :data-tooltip-content="textNewOrg">
           <svg-icon name="octicon-plus"/>
-          <span class="sr-only">{{ textNewOrg }}</span>
         </a>
       </h4>
       <div v-if="organizations.length" class="ui attached table segment gt-rounded-bottom">
diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
index 776e63a83d..cb50ebcae0 100644
--- a/web_src/js/features/common-global.js
+++ b/web_src/js/features/common-global.js
@@ -20,18 +20,14 @@ export function initGlobalFormDirtyLeaveConfirm() {
 }
 
 export function initHeadNavbarContentToggle() {
-  const content = $('#navbar');
-  const toggle = $('#navbar-expand-toggle');
-  let isExpanded = false;
-  toggle.on('click', () => {
-    isExpanded = !isExpanded;
-    if (isExpanded) {
-      content.addClass('shown');
-      toggle.addClass('active');
-    } else {
-      content.removeClass('shown');
-      toggle.removeClass('active');
-    }
+  const navbar = document.getElementById('navbar');
+  const btn = document.getElementById('navbar-expand-toggle');
+  if (!navbar || !btn) return;
+
+  btn.addEventListener('click', () => {
+    const isExpanded = btn.classList.contains('active');
+    navbar.classList.toggle('navbar-menu-open', !isExpanded);
+    btn.classList.toggle('active', !isExpanded);
   });
 }
 
diff --git a/web_src/js/features/repo-code.js b/web_src/js/features/repo-code.js
index 26d8e22472..6a01a8445b 100644
--- a/web_src/js/features/repo-code.js
+++ b/web_src/js/features/repo-code.js
@@ -108,10 +108,15 @@ function showLineButton() {
 
   createTippy(btn, {
     trigger: 'click',
+    hideOnClick: true,
     content: menu,
     placement: 'right-start',
-    role: 'menu',
     interactive: 'true',
+    onShow: (tippy) => {
+      tippy.popper.addEventListener('click', () => {
+        tippy.hide();
+      }, {once: true});
+    }
   });
 }
 
diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js
index cf6e09472e..71d82325ac 100644
--- a/web_src/js/features/repo-issue.js
+++ b/web_src/js/features/repo-issue.js
@@ -476,7 +476,6 @@ export function initRepoPullRequestReview() {
       content: $panel[0],
       placement: 'bottom',
       trigger: 'click',
-      role: 'menu',
       maxWidth: 'none',
       interactive: true,
       hideOnClick: true,
diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js
index d9f496fb85..b424cdfd50 100644
--- a/web_src/js/modules/tippy.js
+++ b/web_src/js/modules/tippy.js
@@ -27,7 +27,8 @@ export function createTippy(target, opts = {}) {
       visibleInstances.add(instance);
     },
     arrow: `<svg width="16" height="7"><path d="m0 7 8-7 8 7Z" class="tippy-svg-arrow-outer"/><path d="m0 8 8-7 8 7Z" class="tippy-svg-arrow-inner"/></svg>`,
-    ...(opts?.role && {theme: opts.role}),
+    role: 'menu', // HTML role attribute, only tooltips should use "tooltip"
+    theme: opts.role || 'menu', // CSS theme, we support either "tooltip" or "menu"
     ...opts,
   });
 
@@ -68,6 +69,7 @@ function attachTooltip(target, content = null) {
     content,
     delay: 100,
     role: 'tooltip',
+    theme: 'tooltip',
     hideOnClick,
     placement: target.getAttribute('data-tooltip-placement') || 'top-start',
     ...(target.getAttribute('data-tooltip-interactive') === 'true' ? {interactive: true, aria: {content: 'describedby', expanded: false}} : {}),