fix(sw-350): fixed ui-comments for calendar, search and widget

components/Forms/BookingWidget/FormContent/index.tsx

@@ -1,4 +1,5 @@
 "use client"
+import { useState } from "react"
 import { useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
@@ -22,6 +23,7 @@ export default function FormContent({
   formId,
 }: BookingWidgetFormContentProps) {
   const intl = useIntl()
+  const [isDatePickerOpen, setIsDatePickerOpen] = useState(false)
   const selectedDate = useWatch({ name: "date" })
 
   const rooms = intl.formatMessage({ id: "Guests & Rooms" })
@@ -35,14 +37,14 @@ export default function FormContent({
           <div className={styles.where}>
             <Search locations={locations} />
           </div>
-          <div className={styles.when}>
+          <div className={isDatePickerOpen ? styles.whenOpen : styles.when}>
             <Caption color="red" textTransform="bold">
               {intl.formatMessage(
                 { id: "booking.nights" },
                 { totalNights: nights }
               )}
             </Caption>
-            <DatePicker />
+            <DatePicker onToggleOpen={setIsDatePickerOpen} />
           </div>
           <div className={styles.rooms}>
             <label>