From 5073fd3b777ae6d9e528419f9a4ec9f98e176aa6 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Mon, 4 Aug 2025 01:46:03 +0100
Subject: [PATCH] Changed image alignment

---
 src/login/Template.tsx                    |  6 +++---
 src/login/pages/LoginUsername.stories.tsx | 25 ++++++++++++++++++++++-
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/login/Template.tsx b/src/login/Template.tsx
index f4d7876..da51fc1 100644
--- a/src/login/Template.tsx
+++ b/src/login/Template.tsx
@@ -166,6 +166,9 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                                         {(() => {
                                             const node = !(auth !== undefined && auth.showUsername && !auth.showResetCredentials) ? (
                                                 <Flex gap={"large"} align="center" style={{ paddingBottom: "8px" }}>
+                                                    <Title level={2} style={{ marginBottom: "0", flexGrow: 1 }}>
+                                                        {headerNode}
+                                                    </Title>
                                                     {client.attributes.logoUri && (
                                                         <img
                                                             src={client.attributes.logoUri}
@@ -173,9 +176,6 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                                                             style={{ maxHeight: "64px", maxWidth: "100%", marginBottom: "5px" }}
                                                         />
                                                     )}
-                                                    <Title level={2} style={{ marginBottom: "0" }}>
-                                                        {headerNode}
-                                                    </Title>
                                                 </Flex>
                                             ) : (
                                                 <>
diff --git a/src/login/pages/LoginUsername.stories.tsx b/src/login/pages/LoginUsername.stories.tsx
index 00a4ac9..24f9f0f 100644
--- a/src/login/pages/LoginUsername.stories.tsx
+++ b/src/login/pages/LoginUsername.stories.tsx
@@ -13,7 +13,21 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <KcPageStory />
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                client: {
+                    attributes: {
+                        logoUri: "https://cdn.tombutcher.work/logos/gitea-logo.png",
+                        policyUri: "https://twitter.com/en/tos",
+                        tosUri: "https://twitter.com/en/privacy"
+                    },
+                    name: "Twitter",
+                    clientId: "twitter-client-id"
+                }
+            }}
+        />
+    )
 };
 
 export const WithEmailAsUsername: Story = {
@@ -23,6 +37,15 @@ export const WithEmailAsUsername: Story = {
                 realm: {
                     loginWithEmailAllowed: true,
                     registrationEmailAsUsername: true
+                },
+                client: {
+                    attributes: {
+                        logoUri: "https://cdn.tombutcher.work/logos/grafana-logo.png",
+                        policyUri: "https://twitter.com/en/tos",
+                        tosUri: "https://twitter.com/en/privacy"
+                    },
+                    name: "Twitter",
+                    clientId: "twitter-client-id"
                 }
             }}
         />