[NIFI-13371] update canvas context menu (#8949)

This closes #8949

nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss

@@ -49,8 +49,14 @@
         background-color: var(--mat-menu-container-color);
         border-radius: 4px;
 
-        .context-menu-item:hover {
-            background-color: var(--mat-menu-item-hover-state-layer-color);
+        .context-menu-item {
+            .context-menu-item-text {
+                max-width: #{mat.get-theme-typography($material-theme, body-2, font-size) * 20};
+            }
+
+            &:hover {
+                background-color: var(--mat-menu-item-hover-state-layer-color);
+            }
         }
 
         .context-menu-item:active {

nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/context-menu/context-menu.component.html

@@ -27,7 +27,7 @@
             } @else {
                 @if (hasSubMenu(item)) {
                     @if (menuComponent.menu; as subMenu) {
-                        <button class="context-menu-item pl-1 pr-1 pt-2 pb-2" cdkMenuItem [cdkMenuTriggerFor]="subMenu">
+                        <button class="context-menu-item p-2" cdkMenuItem [cdkMenuTriggerFor]="subMenu">
                             <div class="flex gap-x-1">
                                 <div class="context-menu-item-img" [class]="item.clazz"></div>
                                 <div class="context-menu-item-text surface-contrast" [title]="item.text">
@@ -43,7 +43,7 @@
                         [menuId]="item.subMenuId"></fd-context-menu>
                 } @else {
                     <button
-                        class="context-menu-item pl-1 pr-1 pt-2 pb-2 flex justify-between"
+                        class="context-menu-item p-2 flex justify-between"
                         (click)="menuItemClicked(item, $event)"
                         cdkMenuItem>
                         <div class="flex gap-x-1">

nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/context-menu/context-menu.component.scss

@@ -53,7 +53,6 @@ div.context-menu {
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
-            max-width: 258px;
         }
 
         .context-menu-group-item-img {

nifi-frontend/src/main/frontend/apps/nifi/src/assets/styles/_app.scss

@@ -235,11 +235,7 @@
 
     // support dark-mode browser default inputs (time, color, ...)
     input {
-        color-scheme: if(
-                $is-dark,
-                dark,
-                light
-        );
+        color-scheme: if($is-dark, dark, light);
     }
 
     // semantic classes for the material theme