fixed editor buttons appearance

src/components/node/NodeEditMenu/styles.module.scss

@@ -0,0 +1,109 @@
+@import "src/styles/variables";
+@import "src/styles/mixins";
+
+@mixin button {
+  margin: 0 $gap;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    fill: darken(white, 50%);
+    transition: fill 0.25s;
+  }
+
+  &:hover {
+    svg {
+      fill: $red;
+    }
+  }
+
+  &::after {
+    content: ' ';
+    flex: 0 0 6px;
+    height: $gap;
+    width: 6px;
+    border-radius: 4px;
+    background: transparentize(black, 0.7);
+    margin-left: $gap * 2;
+  }
+}
+
+.editor_buttons {
+  flex: 0;
+  padding-right: $gap;
+  fill: transparentize(white, 0.7);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+
+  & > * {
+    @include button;
+  }
+
+  @include tablet {
+    align-self: center;
+    display: none;
+
+    & > * {
+      &:last-child {
+        margin-right: 0;
+
+        &::after {
+          display: none;
+        }
+      }
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+
+.star {
+  transition: fill, stroke 0.25s;
+  will-change: transform;
+
+  .is_heroic {
+    svg {
+      fill: $orange;
+    }
+  }
+
+  &:hover {
+    fill: $orange;
+  }
+}
+
+.editor_menu_button {
+  display: none !important;
+
+  @include button();
+
+  @include tablet {
+    display: flex !important;
+  }
+}
+
+.editor_menu {
+  &:hover {
+    .editor_buttons {
+      @include tablet {
+        display: flex;
+        position: absolute;
+        right: 0;
+        top: 100%;
+        background: darken($content_bg, 4%);
+        padding: $gap * 2;
+        border-radius: $radius;
+        box-shadow: transparentize(black, 0.8) 5px 5px 5px;
+        transform: translate(0, -10px);
+        z-index: 10;
+      }
+    }
+  }
+}