🐛 Fix workspace context menu in small screens

frontend/resources/styles/main/partials/workspace.scss

@@ -68,90 +68,6 @@ $height-palette-max: 80px;
   }
 }
 
-.workspace-context-menu {
-  background-color: $color-white;
-  border-radius: $br3;
-  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
-  left: 740px;
-  position: absolute;
-  top: 40px;
-  width: 240px;
-  z-index: 12;
-
-  li {
-    align-items: center;
-    font-size: $fs14;
-    padding: $size-1 $size-4;
-    cursor: pointer;
-
-    display: flex;
-    justify-content: space-between;
-
-    &.separator {
-      border-top: 1px solid $color-gray-10;
-      padding: 0px;
-      margin: 2px;
-    }
-
-    span {
-      color: $color-gray-60;
-    }
-
-    span.shortcut {
-      color: $color-gray-20;
-      font-size: $fs12;
-    }
-
-    &:hover {
-      background-color: $color-primary-lighter;
-    }
-
-    .submenu-icon {
-      position: absolute;
-      right: 1rem;
-
-      svg {
-        width: 10px;
-        height: 10px;
-      }
-    }
-  }
-
-  .icon-menu-item {
-    display: flex;
-    justify-content: flex-start;
-
-    &:hover {
-      background-color: $color-primary-lighter;
-    }
-
-    span.title {
-      margin-left: 5px;
-    }
-
-    .selected-icon {
-      svg {
-        width: 10px;
-        height: 10px;
-      }
-    }
-
-    .shape-icon {
-      margin-left: 3px;
-      svg {
-        width: 13px;
-        height: 13px;
-      }
-    }
-
-    .icon-wrapper {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      margin: 0;
-    }
-  }
-}
-
 .workspace-content {
   background-color: $color-canvas;
   display: flex;

frontend/src/app/main/ui/workspace/context_menu.cljs

@@ -652,11 +652,10 @@
 
     [:& dropdown {:show (boolean mdata)
                   :on-close #(st/emit! dw/hide-context-menu)}
-     [:ul
+     [:ul {:class (stl/css :workspace-context-menu)
-      {:class (stl/css :workspace-context-menu)
+           :ref dropdown-ref
-       :ref dropdown-ref
+           :style {:top top :left left}
-       :style {:top top :left left}
+           :on-context-menu prevent-default}
-       :on-context-menu prevent-default}
 
       (case (:kind mdata)
         :shape [:& shape-context-menu {:mdata mdata}]

frontend/src/app/main/ui/workspace/context_menu.scss

@@ -20,6 +20,8 @@
   border: $s-2 solid var(--panel-border-color);
   background-color: var(--menu-background-color);
   z-index: $z-index-4;
+  max-height: 100vh;
+  overflow-y: auto;
 }
 
 .separator {

frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs

@@ -21,7 +21,7 @@
         shared-libs   (mf/deref refs/workspace-libraries)]
     [:& dropdown {:show show-menu?
                   :on-close close-menu}
-     [:ul {:class (stl/css :workspace-context-menu)}
+     [:ul {:class (stl/css :text-context-menu)}
       (for [[idx cur-library] (map-indexed vector (vals shared-libs))]
         (let [typographies (-> cur-library (get-in [:data :typographies]) vals)]
           [:li

frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss

@@ -6,7 +6,7 @@
 
 @import "refactor/common-refactor.scss";
 
-.workspace-context-menu {
+.text-context-menu {
   position: absolute;
   left: auto;
   bottom: var(--height);