Mirrors/super-productivity
1
0
Fork 0
mirror of https://github.com/johannesjo/super-productivity.git synced 2026-01-23 02:36:05 +00:00
Code Issues Projects Releases Wiki Activity

fix(ui): visibility menu positioning after toggling Inbox #5955

Browse source 
Use visibility:hidden instead of display:none for additional buttons
to keep elements in layout flow. This ensures getBoundingClientRect()
returns correct values for mat-menu positioning.

Also use overflow:clip instead of overflow:hidden to prevent CDK
overlay positioning issues.
This commit is contained in:
Johannes Millan 2026-01-15 12:37:21 +01:00
parent 14e91cc811
commit 1bb61fdd4b
2 changed files with 21 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/app/core-ui/magic-side-nav/nav-list/nav-list-tree.component.scss
View file

@ -12,21 +12,28 @@
display: flex;
align-items: center;
position: relative;
overflow: hidden;
// Use overflow: clip instead of hidden to prevent CDK overlay positioning issues (#5955)
// overflow: clip clips content like hidden but doesn't affect overlay positioning
overflow: clip;
// Hide additional buttons by default on desktop
// Use visibility instead of display:none to keep element in layout flow
// This ensures getBoundingClientRect() returns correct values for mat-menu positioning (#5955)
.additional-btns {
display: none;
visibility: hidden;
pointer-events: none;
@include touchPrimaryDevice() {
display: flex;
visibility: visible;
pointer-events: auto;
}
}
// Show additional buttons on focus/hover (desktop)
//&:focus-within .additional-btns,
&:hover .additional-btns {
display: flex;
visibility: visible;
pointer-events: auto;
}
// Folder header drop zone styling
@ -50,6 +57,7 @@
.additional-btns {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
}

10
src/app/core-ui/magic-side-nav/nav-list/nav-list-tree.component.ts
View file

@ -7,12 +7,13 @@ import {
input,
output,
signal,
viewChild,
} from '@angular/core';
import { CommonModule, NgStyle } from '@angular/common';
import { MatIcon } from '@angular/material/icon';
import { MatIconButton } from '@angular/material/button';
import { MatTooltip } from '@angular/material/tooltip';
import { MatMenuModule } from '@angular/material/menu';
import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
import { TranslatePipe } from '@ngx-translate/core';
import { TreeDndComponent } from '../../../ui/tree-dnd/tree.component';
import { TreeNode } from '../../../ui/tree-dnd/tree.types';
@ -70,6 +71,11 @@ export class NavListTreeComponent {
// Access to service methods and data for visibility menu (includes Inbox for unhiding)
readonly allUnarchivedProjects = this._navConfigService.allUnarchivedProjects;
// ViewChild for visibility menu trigger to close menu after toggling
visibilityMenuTrigger = viewChild<MatMenuTrigger>('visibilityBtn', {
read: MatMenuTrigger,
});
readonly treeNodes = signal<TreeNode<MenuTreeViewNode>[]>([]);
readonly treeKind = computed<MenuTreeKind>(() => this.item().treeKind);
@ -110,6 +116,8 @@ export class NavListTreeComponent {
toggleProjectVisibility(projectId: string): void {
this._navConfigService.toggleProjectVisibility(projectId);
// Close menu to prevent stale positioning after DOM update (#5955)
this.visibilityMenuTrigger()?.closeMenu();
}
onFolderMoreButton(event: MouseEvent, node: TreeNode<MenuTreeViewNode>): void {