🐛 Fix scroll on colorpicker (#8595)

CHANGES.md

@@ -39,6 +39,7 @@
 - Fix warning when clicking on number token pills [Taiga #13661](https://tree.taiga.io/project/penpot/issue/13661)
 - Fix 'not ISeqable' error when entering float values in layout item and opacity inputs [Github #8569](https://github.com/penpot/penpot/pull/8569)
 - Fix crash in select component when options vector is empty [Github #8578](https://github.com/penpot/penpot/pull/8578)
+- Fix scroll on colorpicker [Taiga #13623](https://tree.taiga.io/project/penpot/issue/13623)
 
 ## 2.13.3
 

frontend/src/app/main/ui/ds/layout/tab_switcher.cljs

@@ -103,6 +103,7 @@
   [:map
    [:tabs [:vector {:min 1} schema:tab]]
    [:class {:optional true} :string]
+   [:scrollable-panel {:optional true} :boolean]
    [:on-change fn?]
    [:selected :string]
    [:action-button {:optional true} some?]
@@ -111,15 +112,15 @@
 
 (mf/defc tab-switcher*
   {::mf/schema schema:tab-switcher}
-  [{:keys [tabs class on-change selected action-button-position action-button children] :rest props}]
+  [{:keys [tabs class on-change selected action-button-position action-button children scrollable-panel] :rest props}]
   (let [nodes-ref (mf/use-ref nil)
+        scrollable-panel (d/nilv scrollable-panel false)
 
         tabs
         (if (array? tabs)
           (mfu/bean tabs)
           tabs)
 
-
         on-click
         (mf/use-fn
          (mf/deps on-change)
@@ -186,7 +187,8 @@
                     :on-key-down on-key-down
                     :on-click on-click}]]
 
-     [:section {:class (stl/css :tab-panel)
+     [:section {:class (stl/css-case :tab-panel true
+                                     :scrollable-panel scrollable-panel)
                 :tab-index 0
                 :role "tabpanel"
                 :aria-labelledby selected}

frontend/src/app/main/ui/ds/layout/tab_switcher.scss

@@ -114,5 +114,8 @@
   width: 100%;
   height: 100%;
   outline: $b-1 solid var(--tab-panel-outline-color);
+}
+
+.scrollable-panel {
   overflow-y: auto;
 }