From ef5d3580e83a3c065994d93f3d18c5ab15a12e58 Mon Sep 17 00:00:00 2001
From: "Jens L." <jens@goauthentik.io>
Date: Fri, 6 Jun 2025 01:09:46 +0200
Subject: [PATCH] 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        |  2 +-
 web/src/admin/DebugPage.ts                    | 11 +++++++
 web/src/elements/messages/MessageContainer.ts | 29 ++++++++++++-------
 3 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/authentik/core/templates/if/admin.html b/authentik/core/templates/if/admin.html
index 51d1569dfb..f677ebfec7 100644
--- a/authentik/core/templates/if/admin.html
+++ b/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>
diff --git a/web/src/admin/DebugPage.ts b/web/src/admin/DebugPage.ts
index 1e2b64c641..d5c9d9e1d2 100644
--- a/web/src/admin/DebugPage.ts
+++ b/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>
diff --git a/web/src/elements/messages/MessageContainer.ts b/web/src/elements/messages/MessageContainer.ts
index d03300ec31..c28e7ff24c 100644
--- a/web/src/elements/messages/MessageContainer.ts
+++ b/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,16 +127,18 @@ export class MessageContainer extends AKElement {
 
     render(): TemplateResult {
         return html`<ul class="pf-c-alert-group pf-m-toast">
-            ${this.messages.map((message) => {
-                return html`<ak-message
-                    .message=${message}
-                    .onRemove=${(m: APIMessage) => {
-                        this.messages = this.messages.filter((v) => v !== m);
-                        this.requestUpdate();
-                    }}
-                >
-                </ak-message>`;
-            })}
+            ${Array.from(this.messages)
+                .reverse()
+                .map((message) => {
+                    return html`<ak-message
+                        .message=${message}
+                        .onRemove=${(m: APIMessage) => {
+                            this.messages = this.messages.filter((v) => v !== m);
+                            this.requestUpdate();
+                        }}
+                    >
+                    </ak-message>`;
+                })}
         </ul>`;
     }
 }