🐛 Color palette text-wrap and showing when open color palette

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

@@ -99,8 +99,14 @@
     position: fixed;
     right: calc(#{$width-settings-bar} + 10px);
     text-align: center;
-    width: 110px;
+    width: 125px;
+    white-space: nowrap;
     padding-bottom: 2px;
+    transition: bottom 0.5s;
+
+    &.color-palette-open {
+      bottom: 5rem;
+    }
 
     span {
       color: $color-white;

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

@@ -46,7 +46,8 @@
   [props]
   (let [zoom  (or (obj/get props "zoom") 1)
         vbox  (obj/get props "vbox")
-        vport (obj/get props "vport")]
+        vport (obj/get props "vport")
+        colorpalette? (obj/get props "colorpalette?")]
 
     [:*
      [:div.empty-rule-square]
@@ -56,7 +57,7 @@
      [:& vertical-rule {:zoom zoom
                         :vbox vbox
                         :vport vport}]
-     [:& coordinates]]))
+     [:& coordinates {:colorpalette? colorpalette?}]]))
 
 (mf/defc workspace-content
   {::mf/wrap-props false}
@@ -76,7 +77,8 @@
        (when (contains? layout :rules)
          [:& workspace-rules {:zoom zoom
                               :vbox vbox
-                              :vport vport}])
+                              :vport vport
+                              :colorpalette? (contains? layout :colorpalette)}])
 
        [:& viewport-actions]
        [:& viewport {:file file

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

@@ -81,9 +81,9 @@
 ;; --- Coordinates Widget
 
 (mf/defc coordinates
-  []
+  [{:keys [colorpalette?]}]
   (let [coords (hooks/use-rxsub ms/mouse-position)]
-    [:ul.coordinates
+    [:ul.coordinates {:class (when colorpalette? "color-palette-open")}
      [:span {:alt "x"}
       (str "X: " (:x coords "-"))]
      [:span {:alt "y"}