web/admin: make message container bottom aligned for admin interface (#14816)

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

authentik/core/templates/if/admin.html

@@ -10,7 +10,7 @@
 {% endblock %}
 
 {% block body %}
-<ak-message-container></ak-message-container>
+<ak-message-container alignment="bottom"></ak-message-container>
 <ak-interface-admin>
     <ak-loading></ak-loading>
 </ak-interface-admin>

web/src/admin/DebugPage.ts

@@ -67,6 +67,17 @@ export class DebugPage extends AKElement {
                             >
                                 POST System
                             </button>
+                            <button
+                                class="pf-c-button pf-m-primary"
+                                @click=${() => {
+                                    showMessage({
+                                        level: MessageLevel.info,
+                                        message: `lorem ipsum ${Date.now()}`,
+                                    });
+                                }}
+                            >
+                                Message
+                            </button>
                         </div>
                     </div>
                 </div>

web/src/elements/messages/MessageContainer.ts

@@ -80,6 +80,9 @@ export class MessageContainer extends AKElement {
     @property({ attribute: false })
     messages: APIMessage[] = [];
 
+    @property()
+    alignment: "top" | "bottom" = "top";
+
     static get styles(): CSSResult[] {
         return [
             PFBase,
@@ -89,6 +92,10 @@ export class MessageContainer extends AKElement {
                 ak-message {
                     display: block;
                 }
+                :host([alignment="bottom"]) .pf-c-alert-group.pf-m-toast {
+                    bottom: var(--pf-c-alert-group--m-toast--Top);
+                    top: unset;
+                }
             `,
         ];
     }
@@ -120,7 +127,9 @@ export class MessageContainer extends AKElement {
 
     render(): TemplateResult {
         return html`<ul class="pf-c-alert-group pf-m-toast">
-            ${this.messages.map((message) => {
+            ${Array.from(this.messages)
+                .reverse()
+                .map((message) => {
                     return html`<ak-message
                         .message=${message}
                         .onRemove=${(m: APIMessage) => {