From d751e35d81d3e9e953ac35e868b9714ba4502f67 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 10 Aug 2022 16:47:28 +0200
Subject: [PATCH] Use separate class for tippy targets (#20742)

Previous solution that re-purposed the 'hide' class by making it
`!important` had various unintended side-effects where jQuery .show() was
not able to outweight it. Use a separate class to prevent these
interactions.
---
 templates/base/head_navbar.tmpl     | 2 +-
 templates/repo/commit_statuses.tmpl | 2 +-
 templates/repo/view_file.tmpl       | 2 +-
 web_src/js/modules/tippy.js         | 7 ++++---
 web_src/less/_base.less             | 2 +-
 web_src/less/modules/tippy.less     | 5 +++++
 6 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl
index 5521a28a1..459beb551 100644
--- a/templates/base/head_navbar.tmpl
+++ b/templates/base/head_navbar.tmpl
@@ -86,7 +86,7 @@
 					<span class="sr-mobile-only">{{.locale.Tr "active_stopwatch"}}</span>
 				</span>
 			</a>
-			<div class="active-stopwatch-popup hide">
+			<div class="active-stopwatch-popup tippy-target">
 				<div class="df ac">
 					<a class="stopwatch-link df ac" href="{{.ActiveStopwatch.IssueLink}}">
 						{{svg "octicon-issue-opened" 16 "mr-3"}}
diff --git a/templates/repo/commit_statuses.tmpl b/templates/repo/commit_statuses.tmpl
index fe3598d75..d45d8a1df 100644
--- a/templates/repo/commit_statuses.tmpl
+++ b/templates/repo/commit_statuses.tmpl
@@ -1,5 +1,5 @@
 <a class="ui link commit-statuses-trigger vm">{{template "repo/commit_status" .Status}}</a>
-<div class="ui commit-statuses-popup commit-statuses hide">
+<div class="ui commit-statuses-popup commit-statuses tippy-target">
 	<div class="ui relaxed list divided">
 		{{range .Statuses}}
 			<div class="ui item singular-status df">
diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl
index a25fe28c9..34ed859d4 100644
--- a/templates/repo/view_file.tmpl
+++ b/templates/repo/view_file.tmpl
@@ -120,7 +120,7 @@
 						{{end}}
 					</tbody>
 				</table>
-				<div class="code-line-menu ui vertical pointing menu hide">
+				<div class="code-line-menu ui vertical pointing menu tippy-target">
 					{{if $.Permission.CanRead $.UnitTypeIssues}}
 						<a class="item ref-in-new-issue" href="{{.RepoLink}}/issues/new?body={{.Repository.HTMLURL}}{{printf "/src/commit/" }}{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}" rel="nofollow noindex">{{.locale.Tr "repo.issues.context.reference_issue"}}</a>
 					{{end}}
diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js
index 87f9e8a4b..6f3adaddd 100644
--- a/web_src/js/modules/tippy.js
+++ b/web_src/js/modules/tippy.js
@@ -12,10 +12,11 @@ export function createTippy(target, opts = {}) {
     ...opts,
   });
 
-  // for popups where content refers to a DOM element, we use the 'hide' class to initially hide
-  // the content, now we can remove it as the content has been removed from the DOM by tippy
+  // for popups where content refers to a DOM element, we use the 'tippy-target' class
+  // to initially hide the content, now we can remove it as the content has been removed
+  // from the DOM by tippy
   if (opts.content instanceof Element) {
-    opts.content.classList.remove('hide');
+    opts.content.classList.remove('tippy-target');
   }
 
   return instance;
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index f2711c448..17e9ccfd3 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -1315,7 +1315,7 @@ footer {
 }
 
 .hide {
-  display: none !important;
+  display: none;
 
   &.show-outdated {
     display: none !important;
diff --git a/web_src/less/modules/tippy.less b/web_src/less/modules/tippy.less
index 1fcd0372c..25dd7fc98 100644
--- a/web_src/less/modules/tippy.less
+++ b/web_src/less/modules/tippy.less
@@ -1,5 +1,10 @@
 /* styles are based on node_modules/tippy.js/dist/tippy.css */
 
+// class to hide tippy target elements on page load
+.tippy-target {
+  display: none !important;
+}
+
 [data-tippy-root] {
   max-width: calc(100vw - 10px);
 }