feat:SW-1422 Updated Tablet mode

components/Forms/BookingWidget/FormContent/formContent.module.css

@@ -7,8 +7,7 @@
   width: 24px;
   height: 24px;
 }
-.icon,
-.voucherRow {
+.icon {
   display: none;
 }
 
@@ -17,6 +16,10 @@
   position: relative;
 }
 
+.showOnTablet {
+  display: none;
+}
+
 @media screen and (max-width: 767px) {
   .voucherContainer {
     padding: var(--Spacing-x2) 0 var(--Spacing-x4);
@@ -103,9 +106,13 @@
 }
 
 @media screen and (min-width: 768px) and (max-width: 1366px) {
+  .input {
+    flex-wrap: wrap;
+  }
   .inputContainer {
     padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x2)
       var(--Layout-Tablet-Margin-Margin-min);
+    flex-basis: 80%;
   }
   .buttonContainer {
     padding-right: var(--Layout-Tablet-Margin-Margin-min);
@@ -128,7 +135,11 @@
     border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
     padding: var(--Spacing-x2) var(--Layout-Tablet-Margin-Margin-min);
   }
-  .voucherContainer {
+
+  .showOnTablet {
+    display: flex;
+  }
+  .hideOnTablet {
     display: none;
   }
 }