🐛 Fix onboarding modal height

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
 

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;

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;
+      }
     }
   }
 

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]))