feat: SW-641 Updated UI mobile view

components/GuestsRoomsPicker/ChildSelector/index.tsx

@@ -70,7 +70,7 @@ export default function ChildSelector({ roomIndex = 0 }: ChildSelectorProps) {
           roomIndex={roomIndex}
           index={index}
           child={child}
-          key={index}
+          key={"child_" + index}
         />
       ))}
     </>

components/GuestsRoomsPicker/GuestsRoomsPicker.tsx

@@ -4,7 +4,7 @@ import { useIntl } from "react-intl"
 
 import { useGuestsRoomsStore } from "@/stores/guests-rooms"
 
-import { CloseLargeIcon, PlusCircleIcon } from "../Icons"
+import { CloseLargeIcon, PlusCircleIcon, PlusIcon } from "../Icons"
 import Button from "../TempDesignSystem/Button"
 import Divider from "../TempDesignSystem/Divider"
 import Subtitle from "../TempDesignSystem/Text/Subtitle"
@@ -65,28 +65,51 @@ export default function GuestsRoomsPicker({
             <Divider color="primaryLightSubtle" />
           </div>
         ))}
+        <div className={styles.addRoomMobileContainer}>
+          <Tooltip
+            heading={disabledBookingOptionsHeader}
+            text={disabledBookingOptionsText}
+            position="top"
+            arrow="left"
+          >
+            {rooms.length < 4 ? (
+              <Button
+                intent="text"
+                variant="icon"
+                wrapping
+                disabled
+                theme="base"
+                fullWidth
+              >
+                <PlusIcon />
+                {addRoomLabel}
+              </Button>
+            ) : null}
+          </Tooltip>
+        </div>
       </div>
       <footer className={styles.footer}>
-        <Tooltip
-          heading={disabledBookingOptionsHeader}
-          text={disabledBookingOptionsText}
-          position="bottom"
-          arrow="left"
-        >
-          {rooms.length < 4 ? (
-            <Button
-              intent="text"
-              variant="icon"
-              wrapping
-              disabled
-              theme="base"
-              className={styles.addRoom}
-            >
-              <PlusCircleIcon />
-              {addRoomLabel}
-            </Button>
-          ) : null}
-        </Tooltip>
+        <div className={styles.hideOnMobile}>
+          <Tooltip
+            heading={disabledBookingOptionsHeader}
+            text={disabledBookingOptionsText}
+            position="top"
+            arrow="left"
+          >
+            {rooms.length < 4 ? (
+              <Button
+                intent="text"
+                variant="icon"
+                wrapping
+                disabled
+                theme="base"
+              >
+                <PlusCircleIcon />
+                {addRoomLabel}
+              </Button>
+            ) : null}
+          </Tooltip>
+        </div>
         <Button
           onClick={closePicker}
           disabled={getFieldState("rooms").invalid}

components/GuestsRoomsPicker/guests-rooms-picker.module.css

@@ -34,12 +34,13 @@
 .footer {
   display: grid;
   gap: var(--Spacing-x1);
-  grid-template-columns: auto auto;
+  grid-template-columns: auto;
   margin-top: var(--Spacing-x2);
 }
 
 @media screen and (max-width: 1366px) {
   .hideWrapper {
+    border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0;
     bottom: 0;
     left: 0;
     position: fixed;
@@ -47,10 +48,10 @@
     top: 100%;
     transition: top 300ms ease;
     z-index: 10002;
+    overflow: hidden;
   }
 
   .container[data-isopen="true"] .hideWrapper {
-    border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0;
     top: 20px;
   }
 
@@ -106,16 +107,15 @@
     z-index: 10;
   }
 
-  .footer button {
-    width: 100%;
-  }
-
   .footer .hideOnMobile {
     display: none;
   }
 
-  .footer .addRoom {
-    justify-content: start;
+  .addRoomMobileContainer {
+    display: grid;
+    width: 150px;
+    margin: 0 auto;
+    padding-bottom: calc(var(--sticky-button-height) + 20px);
   }
 }
 
@@ -129,13 +129,20 @@
     position: absolute;
     top: calc(100% + var(--Spacing-x2) + 1px + var(--Spacing-x4));
     width: 360px;
+    max-height: calc(100dvh - 77px - var(--Spacing-x6));
+    overflow-y: auto;
   }
 
   .header {
     display: none;
   }
 
-  .footer .hideOnDesktop {
+  .footer {
+    grid-template-columns: auto auto;
+  }
+
+  .footer .hideOnDesktop,
+  .addRoomMobileContainer {
     display: none;
   }
 }