From 8fa54d0fda4ee5175619bed8fd959b590ef1e5c7 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 11 Feb 2023 22:45:58 +0100
Subject: [PATCH] Fix notification and stopwatch empty states (#22845)

Previous solution was relying on fomantic selector `.ui.label.hidden` to
hide the elements in their empty state, but this doesn't work any more
with the removal of the `label` class. Instead, introduce a standalone
CSS rule for the `hidden` class, which is universally usable as a single
class.

We can unfortunately not use the existing `hide` class because without
the `!important`, it does not have enough specificity to win against
fomantic's `.ui.menu:not(.vertical) .item {display: flex}` rule.

Followup and fixes regression from
https://github.com/go-gitea/gitea/pull/22169.

Before:

<img width="98" alt="image"
src="https://user-images.githubusercontent.com/115237/217959380-d3279ff3-526a-4ac4-9a18-3ab7c9ae91dd.png">

After:

<img width="77" alt="image"
src="https://user-images.githubusercontent.com/115237/217959463-44852716-cb25-4110-8481-668842ad4454.png">
---
 web_src/less/_base.less   | 1 +
 web_src/less/helpers.less | 1 +
 2 files changed, 2 insertions(+)

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 4a22b8af4..279a23ba6 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -1803,6 +1803,7 @@ footer {
   }
 }
 
+/* TODO: remove in favor of .hidden helper */
 .hide {
   display: none;
 
diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less
index 20670a378..06f2f8a34 100644
--- a/web_src/less/helpers.less
+++ b/web_src/less/helpers.less
@@ -22,6 +22,7 @@
 /* below class names match Tailwind CSS */
 .pointer-events-none { pointer-events: none !important; }
 .relative { position: relative !important; }
+.hidden { display: none !important; }
 
 .mono {
   font-family: var(--fonts-monospace) !important;