From 4a7140d82d71ed2daa8bccf5328aff613415477e Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Fri, 24 Apr 2026 11:38:34 +0200 Subject: [PATCH] :bug: Fix theme modal height (#9105) * :bug: Fix CI * :bug: Fix theme modal height --- CHANGES.md | 1 + .../src/app/main/ui/workspace/main_menu.cljs | 6 +- .../workspace/tokens/themes/create_modal.scss | 95 +++++++++++-------- 3 files changed, 62 insertions(+), 40 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 826de71889..18411bd07a 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -23,6 +23,7 @@ - Fix dashboard navigation tabs overlap with projects content when scrolling [Taiga #13962](https://tree.taiga.io/project/penpot/issue/13962) - Fix text editor v1 focus [Taiga #13961](https://tree.taiga.io/project/penpot/issue/13961) - Fix color dropdown option update [Taiga #14035](https://tree.taiga.io/project/penpot/issue/14035) +- Fix themes modal height [Taiga #14046](https://tree.taiga.io/project/penpot/issue/14046) ## 2.15.0 (Unreleased) diff --git a/frontend/src/app/main/ui/workspace/main_menu.cljs b/frontend/src/app/main/ui/workspace/main_menu.cljs index 674a01549d..2f59df3907 100644 --- a/frontend/src/app/main/ui/workspace/main_menu.cljs +++ b/frontend/src/app/main/ui/workspace/main_menu.cljs @@ -745,12 +745,12 @@ (mf/defc mcp-menu* {::mf/private true} [{:keys [on-close]}] - (let [plugins? (features/active-feature? @st/state "plugins/runtime") - + (let [plugins? (features/active-feature? @st/state "plugins/runtime") + profile (mf/deref refs/profile) mcp (mf/deref refs/mcp) tokens (mf/deref refs/access-tokens) - + expired? (some->> tokens (some #(when (= (:type %) "mcp") %)) :expires-at diff --git a/frontend/src/app/main/ui/workspace/tokens/themes/create_modal.scss b/frontend/src/app/main/ui/workspace/tokens/themes/create_modal.scss index c1cc8b59a4..6be2add41c 100644 --- a/frontend/src/app/main/ui/workspace/tokens/themes/create_modal.scss +++ b/frontend/src/app/main/ui/workspace/tokens/themes/create_modal.scss @@ -4,20 +4,36 @@ // // Copyright (c) KALEIDOS INC +@use "ds/_utils.scss" as *; @use "ds/_sizes.scss" as *; - -@use "refactor/common-refactor.scss" as deprecated; +@use "ds/_borders.scss" as *; +@use "ds/mixins.scss" as *; +@use "ds/z-index.scss" as *; .modal-overlay { - @extend .modal-overlay-base; + display: flex; + justify-content: center; + align-items: center; + position: fixed; + inset-inline-start: 0; + inset-block-start: 0; + block-size: 100%; + inline-size: 100%; + z-index: var(--z-index-set); + background-color: var(--color-overlay-default); } .modal-dialog { - @extend .modal-container-base; - - width: 100%; - max-width: deprecated.$s-512; - max-height: unset; + position: relative; + inline-size: 100%; + min-inline-size: $sz-364; + min-block-size: $sz-192; + max-inline-size: $sz-512; + max-block-size: calc(100dvh - #{px2rem(192)}); + padding: var(--sp-xxxl); + border-radius: $br-8; + border: $b-2 solid var(--color-background-quaternary); + background-color: var(--color-background-primary); user-select: none; } @@ -26,14 +42,15 @@ flex-direction: column; justify-content: center; align-items: center; - gap: deprecated.$s-12; - padding: deprecated.$s-72 0; + gap: var(--sp-m); + padding-block: px2rem(72); + padding-inline: 0; } .themes-modal-wrapper { display: flex; flex-direction: column; - gap: deprecated.$s-16; + gap: var(--sp-l); } .edit-theme-form { @@ -53,10 +70,10 @@ border: none; appearance: none; color: var(--color-foreground-secondary); - width: fit-content; + inline-size: fit-content; display: grid; grid-template-columns: auto auto; - gap: deprecated.$s-4; + gap: var(--sp-xs); align-items: center; padding: 0; &:hover { @@ -66,9 +83,9 @@ .button-footer { display: flex; - margin-left: auto; + margin-inline-start: auto; justify-content: flex-end; - gap: deprecated.$s-6; + gap: px2rem(6); } .edit-theme-footer { @@ -97,18 +114,19 @@ .create-theme-wrapper { display: flex; flex-direction: column; - gap: deprecated.$s-24; + gap: var(--sp-xxl); } .close-btn { position: absolute; - top: deprecated.$s-8; - right: deprecated.$s-6; + inset-block-start: var(--sp-s); + inset-inline-end: px2rem(6); } .theme-group-label { color: var(--color-foreground-secondary); - margin: 0 0 deprecated.$s-12 0; + margin-block: 0 var(--sp-m); + margin-inline: 0; padding: 0; } @@ -116,7 +134,7 @@ display: flex; align-items: center; justify-content: flex-start; - gap: deprecated.$s-4; + gap: var(--sp-xs); } .group-title-icon { @@ -124,34 +142,37 @@ } .group-title-name { + @include textEllipsis; + flex-grow: 1; - @include deprecated.textEllipsis; } .theme-group-rows-wrapper { display: flex; flex-direction: column; - gap: deprecated.$s-6; + gap: px2rem(6); margin: 0; } .theme-group-wrapper { display: flex; flex-direction: column; - margin-block-start: deprecated.$s-6; + margin-block-start: px2rem(6); overflow-y: auto; - gap: deprecated.$s-32; + gap: var(--sp-xxxl); + max-block-size: calc(100dvh - #{px2rem(448)}); } .theme-row { align-items: center; display: flex; justify-content: space-between; - gap: deprecated.$s-16; + gap: var(--sp-l); } .theme-name-row { - @include deprecated.textEllipsis; + @include textEllipsis; + flex-grow: 1; } @@ -162,13 +183,13 @@ .theme-actions-row { align-items: center; display: flex; - gap: deprecated.$s-6; + gap: px2rem(6); flex-shrink: 0; } .sets-count-button { - padding: deprecated.$s-6; - padding-left: deprecated.$s-12; + padding: px2rem(6); + padding-inline-start: var(--sp-m); } .label-wrapper { @@ -181,32 +202,32 @@ .edit-theme-wrapper { display: flex; flex-direction: column; - gap: deprecated.$s-24; + gap: var(--sp-xxl); inline-size: 100%; } .sets-list-wrapper { - border: deprecated.$s-1 solid color-mix(in hsl, var(--color-foreground-secondary) 30%, transparent); - border-radius: deprecated.$s-8; + border: $b-1 solid color-mix(in hsl, var(--color-foreground-secondary) 30%, transparent); + border-radius: $br-8; overflow-y: auto; - max-height: deprecated.$s-452; + max-block-size: px2rem(452); } .sets-count-empty-button { text-transform: lowercase; - padding: deprecated.$s-6; - padding-left: deprecated.$s-12; + padding: px2rem(6); + padding-inline-start: var(--sp-m); } .group-input-wrapper { position: relative; display: flex; flex-direction: column; - gap: deprecated.$s-4; + gap: var(--sp-xs); } .edit-theme-inputs-wrapper { display: grid; grid-template-columns: 0.6fr 1fr; - gap: deprecated.$s-12; + gap: var(--sp-m); }