🐛 Fix color palette inner scroll width

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

@@ -73,27 +73,26 @@
 }
 
 .color-palette-content {
-  display: flex;
+    overflow: hidden;
-  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)