feat:SW-1422 Updated Tablet mode

components/Forms/BookingWidget/FormContent/BookingCode/booking-code.module.css

@@ -31,20 +31,46 @@
   width: 100%;
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 767px) {
   .hideOnMobile {
     display: none;
   }
 }
 
+@media screen and (min-width: 768px) {
+  .bookingCodeRememberVisible {
+    align-items: center;
+    background: var(--Base-Surface-Primary-light-Normal);
+    justify-content: space-between;
+    border-radius: var(--Spacing-x-one-and-half);
+  }
+}
+
+@media screen and (min-width: 768px) and (max-width: 1367px) {
+  .container {
+    display: flex;
+    gap: var(--Spacing-x1);
+  }
+  .codePopover {
+    background: var(--Base-Surface-Primary-light-Normal);
+    border-radius: var(--Spacing-x-one-and-half);
+    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.05);
+    padding: var(--Spacing-x2);
+    width: 320px;
+  }
+  .popover {
+    display: grid;
+    gap: var(--Spacing-x2);
+  }
+  .bookingCodeRememberVisible {
+    position: static;
+  }
+}
+
 @media screen and (min-width: 1367px) {
   .bookingCodeRememberVisible {
     padding: var(--Spacing-x2);
-    border-radius: var(--Spacing-x-one-and-half);
     width: 320px;
-    background: white;
     top: calc(100% + 24px);
-    justify-content: space-between;
-    align-items: center;
   }
 }