fix(xo-web/task): fix hidden notification by search field (#4305)

Fixes #3874

CHANGELOG.unreleased.md

@@ -13,6 +13,8 @@
 
 > Users must be able to say: “I had this issue, happy to know it's fixed”
 
+- [Task] fix hidden notification by search field [#3874](https://github.com/vatesfr/xen-orchestra/issues/3874) (PR [#4305](https://github.com/vatesfr/xen-orchestra/pull/4305)
+
 ### Released packages
 
 > Packages will be released in the order they are here, therefore, they should

packages/xo-web/src/index.scss

@@ -213,6 +213,12 @@ $select-input-height: 40px; // Bootstrap input height
   border: 1px solid black;
   margin: 5px 10px;
   width: 250px;
+  // Workaround to prevent some bootstrap elements from hiding the notifications.
+  // In bootstrap, ".input-group .form-control" and ".input-group > .input-group-btn > .btn"
+  // have "z-index: 2" and "z-index: 3" if they are hovered, focused or active.
+  // (https://github.com/twbs/bootstrap/blob/v4.0.0-alpha.5/scss/_input-group.scss#L18-L37)
+  // (https://github.com/twbs/bootstrap/blob/v4.0.0-alpha.5/scss/_input-group.scss#L177-L187)
+  z-index: 3;
   &.success {
     background: $alert-success-bg;
     border-color: $alert-success-border;