sakai-ng-17.0.0 p-panel with "position: fixed" problem, the p-menu will not popup

[cydriclopez]

sakai-ng-17.0.0 p-panel with "position: fixed" problem, the p-menu will not popup. I have tried to play around with ":host ::ng-deep .p-menu { z-index: 2000; }" values but I could not get it to work. Did I miss something? Please help. Thanks very much.

Here in "Panel 1" clicking on the "pi-cog" icon brings up the p-menu popup.

But here in "Panel 2" clicking on the "pi-cog" icon the p-menu fails to popup.

Their html code is similar except that "Panel 2" uses CSS class="trending-right-card".

CSS class="trending-right-card" has "position: fixed".

Here's the component code:

import { Component, OnInit } from '@angular/core';
import { MenuItem } from 'primeng/api';

@Component({
  selector: 'app-trending-right-panel',
  // standalone: true,
  // imports: [],
  templateUrl: './trending-right-panel.component.html',
  styleUrl: './trending-right-panel.component.scss'
})
export class TrendingRightPanelComponent implements OnInit {

  items: MenuItem[];

  constructor() {}

  ngOnInit() {
    this.items = [
      { label: 'Angular.io', icon: 'pi pi-external-link', url: 'http://angular.io' },
      { label: 'Theming', icon: 'pi pi-bookmark', routerLink: ['/theming'] }
    ];
  }

}

Please help. Thanks very much.