style: fix right click the dot doesn't popup in the right sidebar #995

src/main/frontend/components/content.cljs

@@ -47,7 +47,7 @@
 
 (rum/defc custom-context-menu-content
   []
-  [:div#custom-context-menu.w-48.rounded-md.shadow-lg.transition.ease-out.duration-100.transform.opacity-100.scale-100.enter-done.absolute {:style {:z-index 4}}
+  [:div#custom-context-menu
    [:div.py-1.rounded-md.bg-base-3.shadow-xs
     (ui/menu-link
      {:key "cut"
@@ -111,7 +111,7 @@
       (let [properties (:block/properties block)
             heading (get properties "heading")
             heading? (= heading "true")]
-        [:div#custom-context-menu.w-64.rounded-md.shadow-lg.transition.ease-out.duration-100.transform.opacity-100.scale-100.enter-done.absolute {:style {:z-index 4}}
+        [:div#custom-context-menu
          [:div.py-1.rounded-md.bg-base-3.shadow-xs
           [:div.flex-row.flex.justify-between.py-4.pl-2
            [:div.flex-row.flex.justify-between

src/main/frontend/components/content.css

@@ -9,4 +9,11 @@
 .content a.initial-color:hover {
   color: initial;
   text-decoration: none;
+}
+
+#custom-context-menu {
+  @apply rounded-md shadow-lg transition ease-out duration-100 transform
+  opacity-100 scale-100 absolute;
+
+  z-index: calc(var(--ls-z-index-level-1) + 1);
 }

src/main/frontend/components/sidebar.css

@@ -115,7 +115,7 @@
   height: calc(100vh - 3rem);
   overflow-x: hidden;
   overflow-y: auto;
-  z-index: 9;
+  z-index: var(--ls-z-index-level-1);
   transition: width 0.3s, opacity 0.2s;
   border-radius: var(--ls-border-radius-low) 0 0 0;
 

src/main/frontend/components/theme.css

@@ -1,6 +1,13 @@
 :root {
   scrollbar-width: thin;
   scrollbar-color: var(--ls-scrollbar-foreground-color) var(--ls-scrollbar-background-color);
+
+  --ls-z-index-level-0: 0;
+  --ls-z-index-level-1: 9;
+  --ls-z-index-level-2: 99;
+  --ls-z-index-level-3: 999;
+  --ls-z-index-level-4: 9999;
+  --ls-z-index-level-5: 99999;
 }
 
 html:not(.is-mac) {