From a6423541f07292f8e5b74a9ce0e9a4d711eda0d9 Mon Sep 17 00:00:00 2001
From: Markus Winter <m.winter@sap.com>
Date: Fri, 9 Feb 2024 09:05:52 +0100
Subject: [PATCH] [JENKINS-72679] avoid admin monitor popup makes buttons
 unusable (#8941)

avoid admin monitor makes buttons unusable

The div of the admin monitor pop-up is set to opacity 0 but keeps
z-index 1000 when closed. This makes the buttons, that are behind the
popup when shown unusable.
This change uses an animation that ensures the z-index is 0 after hiding
the popup and buttons are still usable
---
 .../resources.css                             | 38 +++++++++++++++++--
 1 file changed, 34 insertions(+), 4 deletions(-)

diff --git a/core/src/main/resources/jenkins/management/AdministrativeMonitorsDecorator/resources.css b/core/src/main/resources/jenkins/management/AdministrativeMonitorsDecorator/resources.css
index d5d817c6a223..0630ae99e731 100644
--- a/core/src/main/resources/jenkins/management/AdministrativeMonitorsDecorator/resources.css
+++ b/core/src/main/resources/jenkins/management/AdministrativeMonitorsDecorator/resources.css
@@ -48,16 +48,46 @@
   display: block;
   background-color: var(--background);
   box-shadow: var(--dropdown-box-shadow);
-  transition: var(--standard-transition);
   border-radius: 15px;
   opacity: 0;
-  transform: translateY(-10px) scale(0.975);
-  z-index: 1000;
+  animation: hide-am-list 300ms ease-in 1 normal;
+  z-index: 0;
 }
+
 .am-container.visible div.am-list {
   opacity: 1;
-  transform: scale(1);
+  animation: show-am-list 300ms ease-in 1 normal forwards;
+  z-index: 1000;
+}
+
+@keyframes show-am-list {
+  from {
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-10px) scale(0.975);
+  }
+  to {
+    opacity: 1;
+    visibility: visible;
+    transform: scale(1);
+  }
+}
+
+@keyframes hide-am-list {
+  from {
+    opacity: 1;
+    visibility: visible;
+    transform: scale(1);
+    z-index: 1000;
+  }
+  to {
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-10px) scale(0.975);
+    z-index: 1000;
+  }
 }
+
 .am-container .am-message {
   display: block;
   line-height: 1.4em;