fix: SW-1040 Updated fields clickable area

components/DatePicker/date-picker.module.css

@@ -1,12 +1,3 @@
-.container {
-  overflow: hidden;
-  position: relative;
-
-  &[data-isopen="true"] {
-    overflow: visible;
-  }
-}
-
 .btn {
   background: none;
   border: none;
@@ -15,6 +6,12 @@
   padding: 0;
   width: 100%;
   text-align: left;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  padding: 20px var(--Spacing-x-one-and-half) 0;
 }
 
 .body {
@@ -33,6 +30,7 @@
 @media screen and (max-width: 1366px) {
   .container {
     z-index: 10001;
+    height: 24px;
   }
 
   .hideWrapper {
@@ -63,6 +61,6 @@
       border-width + 
       wanted space below booking widget
      */
-    top: calc(100% + var(--Spacing-x2) + 1px + var(--Spacing-x4));
+    top: calc(100% + var(--Spacing-x1) + 1px + var(--Spacing-x4));
   }
 }

components/Forms/BookingWidget/FormContent/Search/index.tsx

@@ -169,25 +169,27 @@ export default function Search({ locations }: SearchProps) {
             </Caption>
           </label>
           <div {...getRootProps({}, { suppressRefError: true })}>
-            <Input
+            <label className={styles.searchInput}>
-              {...getInputProps({
+              <Input
-                id: name,
+                {...getInputProps({
-                onFocus(evt) {
+                  id: name,
-                  handleOnFocus(evt)
+                  onFocus(evt) {
-                  openMenu()
+                    handleOnFocus(evt)
-                },
+                    openMenu()
-                placeholder: intl.formatMessage({
-                  id: "Destinations & hotels",
-                }),
-                ...register(name, {
-                  onBlur: function () {
-                    closeMenu()
                   },
-                  onChange: handleOnChange,
+                  placeholder: intl.formatMessage({
-                }),
+                    id: "Destinations & hotels",
-                type: "search",
+                  }),
-              })}
+                  ...register(name, {
-            />
+                    onBlur: function () {
+                      closeMenu()
+                    },
+                    onChange: handleOnChange,
+                  }),
+                  type: "search",
+                })}
+              />
+            </label>
           </div>
           <SearchList
             getItemProps={getItemProps}

components/Forms/BookingWidget/FormContent/Search/search.module.css

@@ -25,3 +25,15 @@
   p {
   color: var(--UI-Text-Active);
 }
+
+.searchInput {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  padding: var(--Spacing-x3) var(--Spacing-x-one-and-half) var(--Spacing-x-half);
+  align-items: center;
+  display: grid;
+}

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

@@ -12,6 +12,11 @@
   display: none;
 }
 
+.rooms,
+.when {
+  position: relative;
+}
+
 @media screen and (max-width: 767px) {
   .voucherContainer {
     padding: var(--Spacing-x2) 0 var(--Spacing-x4);
@@ -43,6 +48,10 @@
     justify-content: center;
     width: 100%;
   }
+
+  .rooms {
+    height: 60px;
+  }
 }
 
 @media screen and (min-width: 768px) {
@@ -79,7 +88,7 @@
   .when:hover,
   .rooms:hover,
   .when:has([data-isopen="true"]),
-  .rooms:has(.input:active, .input:focus, .input:focus-within) {
+  .rooms:has([data-focused="true"], [data-pressed="true"]) {
     background-color: var(--Base-Surface-Primary-light-Hover-alt);
   }
 

components/Forms/BookingWidget/FormContent/index.tsx

@@ -38,10 +38,14 @@ export default function FormContent({
           </div>
           <div className={styles.when}>
             <Caption color="red" type="bold">
-              {intl.formatMessage(
+              {nights > 0
-                { id: "booking.nights" },
+                ? intl.formatMessage(
-                { totalNights: nights > 0 ? nights : 0 }
+                    { id: "booking.nights" },
-              )}
+                    { totalNights: nights }
+                  )
+                : intl.formatMessage({
+                    id: "Check in",
+                  })}
             </Caption>
             <DatePicker />
           </div>

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

@@ -47,6 +47,12 @@
   padding: 0;
   width: 100%;
   text-align: left;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  padding: 20px var(--Spacing-x-one-and-half) 0;
 }
 
 .footer {
@@ -109,6 +115,9 @@
 }
 
 @media screen and (min-width: 1367px) {
+  .container {
+    height: 24px;
+  }
   .pickerContainerMobile {
     display: none;
   }