core: make user settings use vertical tabs

authentik/api/pagination_schema.py

@@ -61,7 +61,8 @@ class PaginationInspector(PaginatorInspector):
         """
         Get the pagination parameters for a single paginator **instance**.
 
-        Should return :data:`.NotHandled` if this inspector does not know how to handle the given `paginator`.
+        Should return :data:`.NotHandled` if this inspector
+        does not know how to handle the given `paginator`.
 
         :param BasePagination paginator: the paginator
         :rtype: list[openapi.Parameter]

authentik/core/templates/user/settings.html

@@ -13,7 +13,7 @@
                 <p>{% trans "Configure settings relevant to your user profile." %}</p>
             </div>
         </section>
-        <ak-tabs>
+        <ak-tabs vertical="true">
             <section slot="page-1" data-tab-title="{% trans 'User details' %}" class="pf-c-page__main-section pf-m-no-padding-mobile">
                 <div class="pf-u-display-flex pf-u-justify-content-center">
                     <div class="pf-u-w-75">

web/src/elements/Tabs.ts

@@ -12,10 +12,17 @@ export class Tabs extends LitElement {
     @property()
     currentPage?: string;
 
+    @property({type: Boolean})
+    vertical = false;
+
     static get styles(): CSSResult[] {
         return [GlobalsStyle, TabsStyle, css`
             ::slotted(*) {
                 height: 100%;
+                flex-grow: 2;
+            }
+            :host([vertical]) {
+                display: flex;
             }
         `];
     }
@@ -39,7 +46,7 @@ export class Tabs extends LitElement {
             }
             this.currentPage = pages[0].attributes.getNamedItem("slot")?.value;
         }
-        return html`<div class="pf-c-tabs">
+        return html`<div class="pf-c-tabs ${this.vertical ? "pf-m-vertical pf-m-box" : ""}">
                 <ul class="pf-c-tabs__list">
                     ${pages.map((page) => this.renderTab(page))}
                 </ul>