[BUGFIX] Set `hidden` on toggling alert visibility state

Toggling the visibility of the new alert element,
introduced with #103699, does actually lead to
changing the `opacity` property. Therefore, the
corresponding space of the alert element will
stay, leaving empty spaces in the backend.

This is now resolved by additionally toggling the
`hidden` class, which works with the `display`
property.

Note: The `show` class has to stay due to the
underlying functionality from the used bootstrap
component.

Resolves: #104346
Related: #103699
Releases: main
Change-Id: Id85da0972be02b43ef78f79fd1118d74e8ff1662
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/85213


Tested-by: Andreas Kienast <a.fernandez@scripting-base.de>
Reviewed-by: Andreas Kienast <a.fernandez@scripting-base.de>
Tested-by: Marcin Sągol <marcin@soee.pl>
Reviewed-by: Marcin Sągol <marcin@soee.pl>
Tested-by: Oliver Bartsch <bo@cedev.de>
Reviewed-by: Oliver Bartsch <bo@cedev.de>
Tested-by: core-ci <typo3@b13.com>

Build/Sources/TypeScript/backend/element/alert-element.ts

@@ -95,6 +95,7 @@ export class AlertElement extends LitElement {
       ['alert-dismissible']: this.dismissible,
       ['fade']: true,
       ['show']: this.visible,
+      ['hidden']: !this.visible,
     };
   }
 

typo3/sysext/backend/Resources/Public/JavaScript/element/alert-element.js

@@ -34,7 +34,7 @@ var AlertElement_1,__decorate=function(e,t,i,r){var s,o=arguments.length,l=o<3?t
         </div>
         ${this.dismissible?this.renderDismissButton():nothing}
       </div>
-    `}getClasses(){return{alert:!0,["alert-"+Severity.getCssClass(this.severity)]:!0,"alert-dismissible":this.dismissible,fade:!0,show:this.visible}}renderDismissButton(){return html`
+    `}getClasses(){return{alert:!0,["alert-"+Severity.getCssClass(this.severity)]:!0,"alert-dismissible":this.dismissible,fade:!0,show:this.visible,hidden:!this.visible}}renderDismissButton(){return html`
       <button type="button" class="close" data-bs-dismiss="alert" aria-label="${lll("button.close")||"Close"}">
         <span aria-hidden="true"><typo3-backend-icon identifier="actions-close" size="small"></typo3-backend-icon></span>
         <span class="visually-hidden">${lll("button.close")||"Close"}</span>