Changed image alignment

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>
                                             ) : (
                                                 <>

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"
                 }
             }}
         />