Mirrors/super-productivity
1
0
Fork 0
mirror of https://github.com/johannesjo/super-productivity.git synced 2026-07-19 01:17:31 +00:00
Code Issues Projects Releases Wiki Activity

fix(settings): Prevent tab shift in settings tabs when page is scrollable

Browse source
This commit is contained in:
Lane Sawyer 2026-07-12 21:19:53 -07:00
parent f9d65debe9
commit a991ec480e
2 changed files with 69 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

106
src/app/pages/config-page/config-page.component.html
View file

@ -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>

20
src/app/pages/config-page/config-page.component.scss
View file

@ -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;