fix(ui): correct position of query command docs

src/main/frontend/components/editor.cljs

@@ -44,13 +44,15 @@
                command-name]
 
               (vector? doc)
-              (ui/tippy {:html doc
-                         :interactive true
-                         :open? true
-                         :fixed-position? true
-                         :position "right"
-                         :distance 10}
-                        [:div command-name])
+              [:div.has-help
+               command-name
+               (ui/tippy
+                 {:html doc
+                  :interactive true
+                  :fixed-position? true
+                  :position "right"}
+
+                [:small (svg/help-circle)])]
 
               :else
               [:div command-name])))
@@ -425,13 +427,13 @@
             :left 0}}
    (let [content (str content "0")]
      (for [[idx c] (map-indexed
-                   vector
-                   (string/split content ""))]
-      (if (= c "\n")
-        [:span {:id (str "mock-text_" idx)
-                :key idx} "0" [:br]]
-        [:span {:id (str "mock-text_" idx)
-                :key idx} c])))])
+                    vector
+                    (string/split content ""))]
+       (if (= c "\n")
+         [:span {:id (str "mock-text_" idx)
+                 :key idx} "0" [:br]]
+         [:span {:id (str "mock-text_" idx)
+                 :key idx} c])))])
 
 (rum/defc mock-textarea-wrapper < rum/reactive
   []
@@ -454,7 +456,6 @@
         set-default-width?
         *pos)))))
 
-
 (rum/defc modals < rum/reactive
   "React to atom changes, find and render the correct modal"
   [id format]

src/main/frontend/components/svg.cljs

@@ -752,5 +752,14 @@
     [:path {:d "M16 4h2a2 2 0 0 1 2 2v2"}]
     [:path {:d "M16 20h2a2 2 0 0 0 2 -2v-2"}]]))
 
+(defn help-circle
+  ([] (help-circle 16))
+  ([size]
+   [:svg.icon {:width size :height size :viewBox "0 0 24 24" :stroke-width "2" :stroke "currentColor" :fill "none" :stroke-linecap "round" :stroke-linejoin "round"}
+    [:path {:stroke "none" :d "M0 0h24v24H0z" :fill "none"}]
+    [:circle {:cx "12" :cy "12" :r "9"}]
+    [:line {:x1 "12" :y1 "17" :x2 "12" :y2 "17.01"}]
+    [:path {:d "M12 13.5a1.5 1.5 0 0 1 1 -1.5a2.6 2.6 0 1 0 -3 -4"}]]))
+
 (def arrow-expand
   (hero-icon "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"))

src/main/frontend/ui.css

@@ -5,8 +5,31 @@
     position: relative;
     -webkit-overflow-scrolling: touch;
 
-    > .menu-link {
-      padding: 6px 8px;
+    .menu-link {
+      .has-help {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        small {
+          visibility: hidden;
+          cursor: help;
+
+          svg {
+            opacity: .5;
+          }
+
+          &:hover svg {
+            opacity: .9;
+          }
+        }
+      }
+
+      &:hover {
+        .has-help small {
+          visibility: visible;
+        }
+      }
     }
   }
 }
@@ -113,15 +136,15 @@
 }
 
 @media (min-width: 1024px) {
-    .panel-content {
-        min-width: 740px;
-    }
+  .panel-content {
+    min-width: 740px;
+  }
 
-    .panel-content .ls-card {
-        width: 740px;
-        min-height: 60vh;
-        max-height: 740px;
-    }
+  .panel-content .ls-card {
+    width: 740px;
+    min-height: 60vh;
+    max-height: 740px;
+  }
 }
 
 .ui__button {
@@ -134,7 +157,7 @@
   }
 
   &:hover {
-        opacity: 0.8;
+    opacity: 0.8;
   }
 
   &.is-link {