From a991ec480ed6d8a76f01319400a314a6bec2c040 Mon Sep 17 00:00:00 2001
From: Lane Sawyer <github@lanesawyer.dev>
Date: Sun, 12 Jul 2026 21:19:53 -0700
Subject: [PATCH] fix(settings): Prevent tab shift in settings tabs when page
 is scrollable

---
 .../config-page/config-page.component.html    | 106 ++++++++++--------
 .../config-page/config-page.component.scss    |  20 ++--
 2 files changed, 69 insertions(+), 57 deletions(-)

diff --git a/src/app/pages/config-page/config-page.component.html b/src/app/pages/config-page/config-page.component.html
index 2f90e97773..04bf2abcff 100644
--- a/src/app/pages/config-page/config-page.component.html
+++ b/src/app/pages/config-page/config-page.component.html
@@ -1,4 +1,4 @@
-<div class="page-settings page-wrapper">
+<div class="page-settings">
   @if (globalCfg) {
     <div class="settings-container">
       <!-- Shared by every tab's `mat-tab-label`: an icon + translated title. -->
@@ -15,6 +15,58 @@
         <span class="tab-label">{{ labelKey | translate }}</span>
       </ng-template>
 
+      <!-- Rendered at the bottom of every tab so it scrolls away with the tab's
+           content (the tab body, not the page, is the scroll container). -->
+      <ng-template #versionFooter>
+        <footer
+          class="version-footer"
+          title="Rev {{ versions?.revision }} {{ versions?.branch }} {{
+            versions?.version
+          }}"
+        >
+          Super Productivity
+          <a
+            class="version"
+            [matTooltip]="T.PS.CLICK_TO_COPY_VERSION | translate"
+            (click)="copyVersionToClipboard(appVersion); $event?.preventDefault()"
+            href="#"
+            >{{ appVersion }}<mat-icon>content_copy</mat-icon></a
+          >
+          –
+          <a
+            href="https://github.com/super-productivity/super-productivity/releases/latest"
+            target="_blank"
+            >Changelog</a
+          >
+          @if (isUpdateCheckPossible) {
+            –
+            <a
+              (click)="checkForUpdates(); $event?.preventDefault()"
+              href="#"
+              >{{ T.PS.CHECK_FOR_UPDATES | translate }}</a
+            >
+          }
+          –
+          <a
+            (click)="showLogs(); $event?.preventDefault()"
+            href="#"
+            >Logs</a
+          >
+          –
+          <a
+            href="https://super-productivity.com/privacy/"
+            target="_blank"
+            >{{ T.PS.PRIVACY_POLICY | translate }}</a
+          >
+          –
+          <a
+            href="https://github.com/super-productivity/super-productivity/discussions/new"
+            target="_blank"
+            >{{ T.PS.PROVIDE_FEEDBACK | translate }}</a
+          >
+        </footer>
+      </ng-template>
+
       <mat-tab-group
         class="settings-tabs"
         [(selectedIndex)]="selectedTabIndex"
@@ -45,6 +97,7 @@
                 ></config-section>
               </section>
             }
+            <ng-container *ngTemplateOutlet="versionFooter"></ng-container>
           </div>
         </mat-tab>
 
@@ -82,6 +135,7 @@
                 (save)="saveGlobalCfg($event)"
               ></config-sound-form>
             </section>
+            <ng-container *ngTemplateOutlet="versionFooter"></ng-container>
           </div>
         </mat-tab>
 
@@ -109,6 +163,7 @@
                 ></config-section>
               </section>
             }
+            <ng-container *ngTemplateOutlet="versionFooter"></ng-container>
           </div>
         </mat-tab>
 
@@ -136,6 +191,7 @@
                 ></config-section>
               </section>
             }
+            <ng-container *ngTemplateOutlet="versionFooter"></ng-container>
           </div>
         </mat-tab>
 
@@ -166,6 +222,7 @@
                 ></config-section>
               </section>
             }
+            <ng-container *ngTemplateOutlet="versionFooter"></ng-container>
           </div>
         </mat-tab>
 
@@ -258,55 +315,10 @@
                 ></config-section>
               </section>
             }
+            <ng-container *ngTemplateOutlet="versionFooter"></ng-container>
           </div>
         </mat-tab>
       </mat-tab-group>
     </div>
   }
 </div>
-
-<footer
-  class="version-footer"
-  title="Rev {{ versions?.revision }} {{ versions?.branch }} {{ versions?.version }}"
->
-  Super Productivity
-  <a
-    class="version"
-    [matTooltip]="T.PS.CLICK_TO_COPY_VERSION | translate"
-    (click)="copyVersionToClipboard(appVersion); $event?.preventDefault()"
-    href="#"
-    >{{ appVersion }}<mat-icon>content_copy</mat-icon></a
-  >
-  –
-  <a
-    href="https://github.com/super-productivity/super-productivity/releases/latest"
-    target="_blank"
-    >Changelog</a
-  >
-  @if (isUpdateCheckPossible) {
-    –
-    <a
-      (click)="checkForUpdates(); $event?.preventDefault()"
-      href="#"
-      >{{ T.PS.CHECK_FOR_UPDATES | translate }}</a
-    >
-  }
-  –
-  <a
-    (click)="showLogs(); $event?.preventDefault()"
-    href="#"
-    >Logs</a
-  >
-  –
-  <a
-    href="https://super-productivity.com/privacy/"
-    target="_blank"
-    >{{ T.PS.PRIVACY_POLICY | translate }}</a
-  >
-  –
-  <a
-    href="https://github.com/super-productivity/super-productivity/discussions/new"
-    target="_blank"
-    >{{ T.PS.PROVIDE_FEEDBACK | translate }}</a
-  >
-</footer>
diff --git a/src/app/pages/config-page/config-page.component.scss b/src/app/pages/config-page/config-page.component.scss
index 6a1ec9c934..d46ba2e57b 100644
--- a/src/app/pages/config-page/config-page.component.scss
+++ b/src/app/pages/config-page/config-page.component.scss
@@ -1,25 +1,24 @@
 @use '../../../styles/_globals.scss' as *;
 
+:host {
+  display: flex;
+}
+
 .page-settings {
   text-align: start;
+  display: flex;
+  flex: 1;
 
   .settings-container {
-    max-width: 100%;
+    display: flex;
+    flex: 1;
   }
 
   .settings-tabs {
-    // Prevent focus-induced scroll jumps: Material tab body containers default to
-    // overflow:auto/hidden, which makes the browser's focus-scrolling algorithm
-    // treat them as scroll boundaries and reset the parent scroll position.
-    ::ng-deep .mat-mdc-tab-body-wrapper,
-    ::ng-deep .mat-mdc-tab-body-active,
-    ::ng-deep .mat-mdc-tab-body-content {
-      overflow: visible !important;
-    }
+    flex: 1;
 
     ::ng-deep .mat-mdc-tab-header {
       border-bottom: 1px solid var(--divider-color);
-      margin-bottom: var(--s2);
     }
 
     ::ng-deep .mat-mdc-tab {
@@ -54,6 +53,7 @@
 
   .tab-content {
     padding-top: var(--s2);
+    padding-inline: var(--s2);
     max-width: 900px;
     margin-left: auto;
     margin-right: auto;