Menu component should have the same minimum width than it's trigger

modules/portmaster/src/app/shared/menu/menu-trigger.html

@@ -1,7 +1,7 @@
 <div (click)="toggle($event)" cdkOverlayOrigin>
-  <div type="button" class="dropdown">
+  <div class="text-opacity-75 dropdown text-primary hover:text-primary hover:text-opacity-100">
     <ng-container *ngIf="!useContent">
-      <svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 2" viewBox="0 0 11.86 19.86">
+      <svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 2" viewBox="0 0 11.86 19.86" fill="currentColor">
         <circle cx="1.93" cy="1.93" r="1.93" />
         <circle cx="1.93" cy="9.93" r="1.93" />
         <circle cx="1.93" cy="17.93" r="1.93" />

modules/portmaster/src/app/shared/menu/menu-trigger.scss

@@ -1,60 +1,41 @@
 :host {
-  user-select : none;
+  user-select: none;
   margin-right: .5rem;
-  display     : block;
+  display: block;
   @apply rounded-t-sm;
-
-  &:hover {
-    .dropdown {
-      svg {
-        opacity: 1;
-        fill   : var(--text-primary);
-      }
-    }
-  }
 }
 
 div {
-  cursor : pointer;
+  cursor: pointer;
   display: flex;
   @apply rounded-t;
-  flex-grow      : 0;
-  width          : 1rem;
-  transition     : all .1s ease-in-out;
+  flex-grow: 0;
+  transition: all .1s ease-in-out;
   justify-content: center;
-  align-items    : center;
+  align-items: center;
   @apply py-1;
   @apply px-3;
 }
 
 .dropdown {
   margin-left: 1px;
-  width      : 2rem;
-  height     : auto;
-  padding    : 0;
-  margin     : 0;
+  height: auto;
+  padding: 0;
+  margin: 0;
 
   svg {
-    opacity   : 0.7;
-    fill      : var(--text-primary);
-    width     : 0.51rem;
+    opacity: 0.7;
+    fill: var(--text-primary);
+    width: 0.51rem;
     transition: all cubic-bezier(0.175, 0.885, 0.32, 1.275) .2s;
 
     transform: rotate(90deg);
-    position : relative;
-    top      : 3px;
+    position: relative;
+    top: 3px;
   }
 }
 
 :host.active {
-  @apply bg-buttons-light;
-
-  .dropdown {
-    cursor: pointer;
-
-    svg {
-      opacity: 1;
-      fill   : var(--text-primary);
-    }
-  }
+  @apply bg-gray-500;
+  color: white !important;
 }

modules/portmaster/src/app/shared/menu/menu.html

@@ -2,7 +2,8 @@
 
   <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="trigger!.origin!" [cdkConnectedOverlayOpen]="isOpen"
     (detach)="onOverlayClosed()" [cdkConnectedOverlayScrollStrategy]="scrollStrategy"
-    [cdkConnectedOverlayPositions]="positions" (overlayOutsideClick)="onOutsideClick($event)">
+    [cdkConnectedOverlayMinWidth]="minWidth" [cdkConnectedOverlayPositions]="positions"
+    (overlayOutsideClick)="onOutsideClick($event)">
     <div class="item-list" [@fadeIn] [@fadeOut]>
       <ng-content></ng-content>
     </div>

modules/portmaster/src/app/shared/menu/menu.scss

@@ -1,42 +1,40 @@
 .item-list {
-  width         : 100%;
-  display       : flex;
+  width: 100%;
+  display: flex;
   flex-direction: column;
-  @apply bg-buttons-light;
+  @apply bg-gray-500;
   @apply shadow-xl;
   user-select: none;
 
   app-menu-item,
   app-menu-group {
     display: block;
-    width  : 100%;
+    width: 100%;
   }
 
   app-menu-item {
     cursor: pointer;
     @apply p-2;
-    @apply px-4;
-    font-size  : 0.7rem;
-    color      : #cacaca;
+    @apply px-4 text-primary text-xxs;
     font-weight: 500;
 
     &:hover {
-      @apply bg-buttons-dark;
+      @apply bg-gray-300;
     }
 
     &.disabled {
-      cursor : not-allowed;
+      cursor: not-allowed;
       opacity: 0.5;
     }
   }
 
   app-menu-group {
     @apply p-1;
     @apply px-4;
-    display       : block;
+    display: block;
     text-transform: uppercase;
     @apply text-secondary;
     font-size: 0.7rem;
-    opacity  : .7;
+    opacity: .7;
   }
 }

modules/portmaster/src/app/shared/menu/menu.ts

@@ -1,6 +1,6 @@
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { CdkOverlayOrigin, ConnectedPosition, ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, EventEmitter, HostBinding, HostListener, Input, Output, QueryList, Renderer2, ViewChild, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, QueryList, Renderer2, ViewChild, ViewEncapsulation } from '@angular/core';
 import { fadeInAnimation, fadeOutAnimation } from '../animations';
 
 @Component({
@@ -32,7 +32,10 @@ export class MenuTriggerComponent {
     return this.menu.isOpen;
   }
 
-  constructor(public changeDetectorRef: ChangeDetectorRef) { }
+  constructor(
+    public changeDetectorRef: ChangeDetectorRef,
+    public elementRef: ElementRef,
+  ) { }
 
   toggle(event: MouseEvent) {
     event.preventDefault();
@@ -108,6 +111,7 @@ export class MenuComponent {
   items: QueryList<MenuItemComponent> | null = null;
 
   scrollStrategy: ScrollStrategy;
+  minWidth: number = 0;
 
   positions: ConnectedPosition[] = [
     {
@@ -169,6 +173,8 @@ export class MenuComponent {
 
     if (!!t) {
       this.trigger = t;
+      const rect = (this.trigger.elementRef.nativeElement as HTMLElement).getBoundingClientRect()
+      this.minWidth = rect ? rect.width : 0;
     }
     this.isOpen = true;
   }