core: use a single column for flow executor flow

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

authentik/core/templates/login/base_full.html

@@ -4,16 +4,6 @@
 {% load i18n %}
 {% load authentik_utils %}
 
-{% block head %}
-{{ block.super }}
-<style>
-/* Fix logo/header/footer block moving around when card size changes */
-.pf-c-login__header {
-    grid-row-start: 3;
-}
-</style>
-{% endblock %}
-
 {% block body %}
 <div class="pf-c-background-image">
     <svg xmlns="http://www.w3.org/2000/svg" class="pf-c-background-image__filter" width="0" height="0">
@@ -30,7 +20,7 @@
 </div>
 <ak-message-container></ak-message-container>
 <div class="pf-c-login">
-    <div class="pf-c-login__container">
+    <div class="ak-login-container">
         <header class="pf-c-login__header">
             <div class="pf-c-brand ak-brand">
                 <img src="{{ config.authentik.branding.logo }}" alt="authentik icon" />
@@ -38,6 +28,21 @@
                 <p>{{ config.authentik.branding.title }}</p>
                 {% endif %}
             </div>
+        </header>
+        {% block main_container %}
+        <main class="pf-c-login__main">
+            <header class="pf-c-login__main-header">
+                <h1 class="pf-c-title pf-m-3xl">
+                    {% block card_title %}
+                    {% endblock %}
+                </h1>
+            </header>
+            <div class="pf-c-login__main-body">
+                {% block card %}
+                {% endblock %}
+            </div>
+        </main>
+        {% endblock %}
         <footer class="pf-c-login__footer">
             <p></p>
             <ul class="pf-c-list pf-m-inline">
@@ -55,21 +60,6 @@
                 {% endif %}
             </ul>
         </footer>
-        </header>
-        {% block main_container %}
-        <main class="pf-c-login__main">
-            <header class="pf-c-login__main-header">
-                <h1 class="pf-c-title pf-m-3xl">
-                    {% block card_title %}
-                    {% endblock %}
-                </h1>
-            </header>
-            <div class="pf-c-login__main-body">
-                {% block card %}
-                {% endblock %}
-            </div>
-        </main>
-        {% endblock %}
     </div>
 </div>
 {% endblock %}

web/src/authentik.css

@@ -15,10 +15,35 @@ html > input {
     z-index: 0;
 }
 
+/*****************************
+* Login adjustments
+*****************************/
 /* Ensure card is displayed on small screens */
 .pf-c-login__main {
     display: block;
 }
+.ak-login-container {
+    height: calc(100vh - var(--pf-global--spacer--lg) - var(--pf-global--spacer--lg));
+    width: 35rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+}
+.pf-c-login__header {
+    flex-grow: 1;
+}
+.pf-c-login__main {
+    flex-shrink: 1;
+}
+.pf-c-login__footer {
+    flex-grow: 1;
+}
+.pf-c-login__footer ul.pf-c-list.pf-m-inline {
+    justify-content: center;
+}
+/*****************************
+* End Login adjustments
+*****************************/
 
 .pf-c-content h1 {
     display: flex;