diff --git a/CHANGES.md b/CHANGES.md index efbcd5b866..90ac9c8962 100644 --- a/CHANGES.md +++ b/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 diff --git a/frontend/src/app/main/ui/ds/layout/tab_switcher.cljs b/frontend/src/app/main/ui/ds/layout/tab_switcher.cljs index 9034d27e79..0d1e427c4f 100644 --- a/frontend/src/app/main/ui/ds/layout/tab_switcher.cljs +++ b/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} diff --git a/frontend/src/app/main/ui/ds/layout/tab_switcher.scss b/frontend/src/app/main/ui/ds/layout/tab_switcher.scss index 56ecfe27f0..90af8cf778 100644 --- a/frontend/src/app/main/ui/ds/layout/tab_switcher.scss +++ b/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; }