Impl [Wizard] Adjust steps layout in small resolution (#153)

iguazio · Aug 9, 2023 · 8bac21c · 8bac21c
1 parent bae8b46
commit 8bac21c
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 22 deletions.
diff --git a/src/lib/components/Modal/Modal.scss b/src/lib/components/Modal/Modal.scss
@@ -38,15 +38,14 @@
   }
 
   &.modal-max {
-    width: 90vw;
-    height: 90vh;
+    width: 96vw;
+    height: 94vw;
   }
 
   &__content {
     display: flex;
     flex-flow: column nowrap;
     position: relative;
-    padding-bottom: 1rem;
     min-height: inherit;
     height: 100%;
     width: 100%;
@@ -101,7 +100,7 @@
     flex-flow: row nowrap;
     flex-shrink: 0;
     justify-content: space-between;
-    padding: 0 2rem;
+    padding: 1rem 2rem;
     min-height: 50px;
 
     &-actions {

diff --git a/src/lib/components/Wizard/Wizard.scss b/src/lib/components/Wizard/Wizard.scss
@@ -1,17 +1,24 @@
 .wizard-form {
   .modal__body {
     display: flex;
-    flex-flow: row nowrap;
+    flex-flow: column nowrap;
     overflow: hidden;
-    padding-top: 0;
-    padding-right: 0;
+    padding: 0;
+
+    @media screen and (min-width: 1200px) {
+      flex-flow: row nowrap;
+    }
   }
 
   .wizard-form__content-container {
     overflow-y: auto;
     height: 100%;
     width: 100%;
-    padding: 1.5rem 2rem 1.5rem 1rem;
+    padding: 0 2rem 1.5rem;
+
+    @media screen and (min-width: 1200px) {
+      padding: 1.5rem 2rem 1.5rem 1rem;
+    }
   }
 
   .wizard-form__content {

diff --git a/src/lib/components/Wizard/WizardSteps/WizardSteps.scss b/src/lib/components/Wizard/WizardSteps/WizardSteps.scss
@@ -3,22 +3,17 @@
 @import '../../../scss/borders';
 
 .wizard-steps {
+  display: flex;
+  flex-flow: row nowrap;
   background-color: $white;
   min-width: 260px;
-  margin-right: 1rem;
-  margin-top: 1.5rem;
-  padding-right: 1rem;
-  overflow-y: auto;
+  margin: 1.5rem 0;
+  padding: 0 2rem;
 
-  &__indicator {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border: 2px solid transparent;
-    border-radius: 50%;
-    padding: 10px;
-    width: 36px;
-    height: 36px;
+  @media screen and (min-width: 1200px) {
+    flex-flow: column nowrap;
+    overflow-y: auto;
+    padding: 0 1rem;
   }
 
   & > *:not(:last-child) {
@@ -27,18 +22,29 @@
 
   .wizard-steps {
     &__item {
+      align-items: baseline;
       justify-content: flex-start;
       background-color: inherit;
       border: 0;
       border-radius: 8px;
       font-size: 1em;
       padding: 8px;
       min-height: 52px;
+      height: auto;
       width: 100%;
 
       & > * {
-        text-align: left;
+        display: flex;
+        flex-flow: column nowrap;
+        align-items: center;
+        text-align: center;
         white-space: normal;
+        width: 100%;
+
+        @media screen and (min-width: 1200px) {
+          flex-flow: row nowrap;
+          text-align: left;
+        }
       }
 
       &.active {
@@ -73,5 +79,23 @@
         }
       }
     }
+
+    &__indicator {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border: 2px solid transparent;
+      border-radius: 50%;
+      padding: 10px;
+      margin: 0 0 10px 0;
+      width: 36px;
+      height: 36px;
+
+      @media screen and (min-width: 1200px) {
+        flex-flow: row nowrap;
+        text-align: left;
+        margin: 0 10px 0 0;
+      }
+    }
   }
 }