[JENKINS-72679] avoid admin monitor popup makes buttons unusable (jen…

…kinsci#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

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;