tweak hotbar icon context menu

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

src/renderer/components/hotbar/hotbar-icon.scss

@@ -1,4 +1,5 @@
-.HotbarIcon {
+.HotbarMenu {
+  .HotbarIcon {
     --size: 37px;
 
     position: relative;
@@ -41,4 +42,17 @@
       width: var(--size);
       height: var(--size);
     }
+  }
+
+  .HotbarIconMenu {
+    left: 30px;
+    min-width: 250px;
+
+    ul {
+      li {
+        font-size: 12px;
+
+      }
+    }
+  }
 }

src/renderer/components/hotbar/hotbar-icon.tsx

@@ -14,6 +14,7 @@ import { hotbarStore } from "../../../common/hotbar-store";
 
 interface Props extends DOMAttributes<HTMLElement> {
   entity: CatalogEntity;
+  index: number;
   className?: IClassName;
   errorClass?: IClassName;
   isActive?: boolean;
@@ -70,7 +71,7 @@ export class HotbarIcon extends React.Component<Props> {
       entity, errorClass, isActive,
       children, ...elemProps
     } = this.props;
-    const entityIconId = `hotbar-icon-${entity.metadata.uid}`;
+    const entityIconId = `hotbar-icon-${this.props.index}`;
     const className = cssNames("HotbarIcon flex inline", this.props.className, {
       interactive: true,
       active: isActive,
@@ -81,15 +82,16 @@ export class HotbarIcon extends React.Component<Props> {
     };
 
     return (
-      <div {...elemProps} className={className} id={entityIconId}>
+      <div className={className}>
         <Tooltip targetId={entityIconId}>{entity.metadata.name}</Tooltip>
-        <Avatar variant="square" className={isActive ? "active" : "default"}>{this.iconString}</Avatar>
+        <Avatar {...elemProps} id={entityIconId} variant="square" className={isActive ? "active" : "default"}>{this.iconString}</Avatar>
         <Menu
-          usePortal={true}
+          usePortal={false}
           htmlFor={entityIconId}
+          className="HotbarIconMenu"
           isOpen={this.menuOpen}
           toggleEvent="contextmenu"
-          position={{right: true, top: true}} // FIXME: position does not work
+          position={{right: true, bottom: true }} // FIXME: position does not work
           open={() => onOpen()}
           close={() => this.toggleMenu()}>
           <MenuItem key="remove-from-hotbar" onClick={() => this.removeFromHotbar(entity) }>

src/renderer/components/hotbar/hotbar-menu.scss

@@ -14,9 +14,9 @@
   }
 
   .items {
-    @include hidden-scrollbar;
     padding: 0 $spacing; // extra spacing for cluster-icon's badge
     margin-bottom: $margin;
+    overflow: visible;
 
     &:empty {
       display: none;

src/renderer/components/hotbar/hotbar-menu.tsx

@@ -27,10 +27,11 @@ export class HotbarMenu extends React.Component<Props> {
     return (
       <div className={cssNames("HotbarMenu flex column", className)}>
         <div className="items flex column gaps">
-          {items.map((entity) => {
+          {items.map((entity, index) => {
             return (
               <HotbarIcon
-                key={entity.metadata.uid}
+                key={index}
+                index={index}
                 entity={entity}
                 isActive={entity.status.active}
                 onClick={() => entity.onRun(catalogEntityRunContext)}