Merge pull request #4666 from penpot/ladybenko-7559-fix-palette

Fixes for the color palette

CHANGES.md

@@ -13,6 +13,8 @@
 
 ### :bug: Bugs fixed
 
+- Layout and scrollign fixes for the bottom palette [Taiga Issue #7559](https://tree.taiga.io/project/penpot/issue/7559)
+
 ## 2.0.3
 
 ### :bug: Bugs fixed

frontend/src/app/main/ui/components/color_bullet.cljs

@@ -44,6 +44,10 @@
         (some? image)
         (tr "media.image")))))
 
+(defn- breakable-color-title
+  [title]
+  (str/replace title "." ".\u200B"))
+
 (mf/defc color-bullet
   {::mf/wrap [mf/memo]
    ::mf/wrap-props false}
@@ -112,4 +116,4 @@
               :title name
               :on-click on-click
               :on-double-click on-double-click}
-       (or name color (uc/gradient-type->string (:type gradient)))])))
+       (breakable-color-title (or name color (uc/gradient-type->string (:type gradient))))])))

frontend/src/app/main/ui/components/color_bullet.scss

@@ -86,8 +86,8 @@
 .big-text {
   @include inspectValue;
   @include twoLineTextEllipsis;
+  line-height: 1;
   color: var(--palette-text-color);
-  height: $s-28;
   text-align: center;
 }
 

frontend/src/app/main/ui/components/forms.scss

@@ -259,11 +259,10 @@
 // SUBMIT-BUTTON
 .button-submit {
   @extend .button-primary;
-}
+  &:disabled {
-
+    @extend .button-disabled;
-:disabled {
+    min-height: $s-32;
-  @extend .button-disabled;
+  }
-  min-height: $s-32;
 }
 
 // MULTI INPUT

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

@@ -41,27 +41,29 @@
         state          (mf/use-state {:show-menu false})
         offset-step (cond
                       (<= size 64) 40
-                      (<= size 72) 88
+                      (<= size 80) 72
-                      (<= size 80) 88
+                      :else 72)
-                      :else 88)
         buttons-size (cond
                        (<= size 64) 164
-                       (<= size 72) 164
-                       (<= size 80) 132
                        :else 132)
         width          (- width buttons-size)
         visible        (int (/ width offset-step))
         show-arrows?   (> (count current-colors) visible)
+        visible        (if show-arrows?
+                         (int (/ (- width 48) offset-step))
+                         visible)
         offset         (:offset @state 0)
         max-offset     (- (count current-colors)
                           visible)
-
         container      (mf/use-ref nil)
         bullet-size  (cond
                        (<= size 64) "32"
                        (<= size 72) "28"
                        (<= size 80) "32"
                        :else "32")
+        color-cell-width (cond
+                           (<= size 64) 32
+                           :else 64)
 
         on-left-arrow-click
         (mf/use-callback
@@ -103,7 +105,7 @@
 
     [:div {:class (stl/css-case :color-palette true
                                 :no-text (< size 64))
-           :style #js {"--bullet-size" (dm/str bullet-size "px")}}
+           :style #js {"--bullet-size" (dm/str bullet-size "px") "--color-cell-width" (dm/str color-cell-width "px")}}
 
      (when show-arrows?
        [:button {:class (stl/css :left-arrow)

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

@@ -62,7 +62,8 @@
       var(--palette-button-shadow-final) 100%
     );
   }
-  &.disabled ::after {
+
+  &:disabled::after {
     background-image: none;
   }
 
@@ -72,27 +73,26 @@
 }
 
 .color-palette-content {
-  display: flex;
   overflow: hidden;
+}
 
-  .color-palette-inside {
+.color-palette-inside {
-    display: flex;
+  display: grid;
-    gap: $s-8;
+  grid-auto-flow: column;
-  }
+  grid-auto-columns: var(--color-cell-width);
-  .color-cell {
+  gap: $s-8;
-    display: grid;
+}
-    grid-template-columns: 100%;
+
-    grid-template-rows: auto 1fr;
+.color-cell {
-    justify-items: center;
+  display: grid;
-    height: 100%;
+  grid-template-columns: 100%;
-    width: $s-80;
+  grid-template-rows: auto 1fr;
-    &.is-not-library-color {
+  justify-items: center;
-      width: $s-64;
+  height: 100%;
-    }
+
-    &.no-text {
+  &.no-text {
-      @include flexCenter;
+    @include flexCenter;
-      width: $s-32;
+    width: $s-32;
-    }
   }
 }
 

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

@@ -125,7 +125,6 @@
              (dom/blur! node))))
 
         any-palette? (or color-palette? text-palette?)
-
         size-classname
         (cond
           (<= size 64) (stl/css :small-palette)