unrelated: switch to non-vertical tabs on smaller viewport

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

web/src/elements/Tabs.ts

@@ -18,9 +18,17 @@ export class Tabs extends AKElement {
     @property()
     currentPage?: string;
 
-    @property({ type: Boolean })
+    @property({ type: Boolean, reflect: true })
     vertical = false;
 
+    @property({ type: Boolean })
+    autoVertical = false;
+
+    @property({ attribute: false })
+    verticalEnabled = (): boolean => {
+        return this.vertical;
+    };
+
     static get styles(): CSSResult[] {
         return [
             PFGlobal,
@@ -46,12 +54,16 @@ export class Tabs extends AKElement {
     }
 
     observer: MutationObserver;
+    resizer: ResizeObserver;
 
     constructor() {
         super();
         this.observer = new MutationObserver(() => {
             this.requestUpdate();
         });
+        this.resizer = new ResizeObserver(() => {
+            this.vertical = this.verticalEnabled();
+        });
     }
 
     connectedCallback(): void {
@@ -61,10 +73,12 @@ export class Tabs extends AKElement {
             childList: true,
             subtree: true,
         });
+        this.resizer.observe(document.body);
     }
 
     disconnectedCallback(): void {
         this.observer.disconnect();
+        this.resizer.disconnect();
         super.disconnectedCallback();
     }
 
@@ -106,7 +120,7 @@ export class Tabs extends AKElement {
             const wantedPage = pages[0].attributes.getNamedItem("slot")?.value;
             this.onClick(wantedPage);
         }
-        return html`<div class="pf-c-tabs ${this.vertical ? "pf-m-vertical pf-m-box" : ""}">
+        return html`<div class="pf-c-tabs ${this.vertical ? "pf-m-vertical" : ""}">
                 <ul class="pf-c-tabs__list">
                     ${pages.map((page) => this.renderTab(page))}
                 </ul>

web/src/user/user-settings/UserSettingsPage.ts

@@ -90,7 +90,12 @@ export class UserSettingsPage extends AKElement {
             [];
         return html`<div class="pf-c-page">
             <main role="main" class="pf-c-page__main" tabindex="-1">
-                <ak-tabs ?vertical="${true}">
+                <ak-tabs
+                    ?autoVertical="${true}"
+                    .verticalEnabled=${() => {
+                        return document.body.getBoundingClientRect().width >= 780;
+                    }}
+                >
                     <section
                         slot="page-details"
                         data-tab-title="${msg("User details")}"