diff --git a/CHANGES.md b/CHANGES.md index 7d22d1195..f9d0b9534 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -75,6 +75,7 @@ - Fix retrieve user comments in dashboard [Taiga #5607](https://tree.taiga.io/project/penpot/issue/5607) - Locks shapes when moved inside a locked parent [Taiga #5252](https://tree.taiga.io/project/penpot/issue/5252) - Fix rotate several elements in bulk [Taiga #5165](https://tree.taiga.io/project/penpot/issue/5165) +- Fix onboarding slides height [Taiga #5373](https://tree.taiga.io/project/penpot/issue/5373) ### :arrow_up: Deps updates diff --git a/frontend/resources/styles/main/partials/modal.scss b/frontend/resources/styles/main/partials/modal.scss index 17f67146a..3636416c4 100644 --- a/frontend/resources/styles/main/partials/modal.scss +++ b/frontend/resources/styles/main/partials/modal.scss @@ -899,7 +899,8 @@ } &.onboarding-v2 { - min-height: 464px; + min-height: unset; + height: 100%; min-width: 752px; .modal-left { background-color: $color-gray-50; diff --git a/frontend/resources/styles/main/partials/signup-questions.scss b/frontend/resources/styles/main/partials/signup-questions.scss index 35ec09c5f..ee1f42645 100644 --- a/frontend/resources/styles/main/partials/signup-questions.scss +++ b/frontend/resources/styles/main/partials/signup-questions.scss @@ -7,12 +7,16 @@ .signup-questions { background-color: $color-white; color: $color-gray-60; - height: 710px; max-width: 646px; overflow-y: auto; padding: 1.5rem 1rem; position: relative; width: 100%; + form { + display: flex; + flex-direction: column; + height: 100%; + } h1, h3 { @@ -33,6 +37,9 @@ height: 2.5rem; width: 100%; } + .custom-select { + margin-bottom: 10px; + } .step-number { background-color: $color-gray-10; @@ -71,30 +78,38 @@ margin: 0.75rem 0 2rem 0; } } - - .step-prev { - position: absolute; - left: 1rem; - bottom: 1.25rem; - button { - background-color: transparent; - border: none; - cursor: pointer; - font-size: $fs15; + .buttons { + flex-grow: 1; + display: grid; + grid-template-columns: 50% 50%; + grid-template-areas: "previous next"; + .step-prev { + display: flex; + align-items: end; + justify-content: flex-start; + grid-area: previous; + button { + background-color: transparent; + border: none; + cursor: pointer; + height: 40px; + font-size: $fs15; + } } - } - .step-next { - display: flex; - position: absolute; - right: 1rem; - bottom: 0rem; - input { - font-size: $fs15; - color: $color-black; - background-color: $color-primary; - width: 11rem; - margin-left: auto; + .step-next { + display: flex; + align-items: end; + justify-content: flex-end; + grid-area: next; + input { + font-size: $fs15; + color: $color-black; + background-color: $color-primary; + width: 11rem; + margin-left: auto; + margin: 0; + } } } diff --git a/frontend/src/app/main/ui/onboarding/questions.cljs b/frontend/src/app/main/ui/onboarding/questions.cljs index a64905e4d..d5cd52a95 100644 --- a/frontend/src/app/main/ui/onboarding/questions.cljs +++ b/frontend/src/app/main/ui/onboarding/questions.cljs @@ -24,15 +24,15 @@ [:div.step-number (str/ffmt "%/4" step)]] children + [:div.buttons + [:div.step-next + [:& fm/submit-button + {:label (if (< step 4) (tr "questions.next") (tr "questions.start")) + :class "step-next"}]] - [:div.step-next - [:& fm/submit-button - {:label (if (< step 4) (tr "questions.next") (tr "questions.start")) - :class "step-next"}]] - - (when on-prev - [:div.step-prev - [:button {:on-click on-prev} (tr "questions.previous")]])]) + (when on-prev + [:div.step-prev + [:button {:on-click on-prev} (tr "questions.previous")]])]]) (s/def ::questions-form-step-1 (s/keys :req-un [::planning]))