Merged in fix/book-769-booking-widget-ui-bugs (pull request #3524)

Fix/book 769 booking widget ui bugs

* fixed text in serachList not wrapping properly

* fixed spacing on mobile searchList

* fixed close button icon color

* fix for issues with fixed vs sticky elements on scroll lock

Approved-by: Linus Flood

packages/booking-flow/lib/components/BookingWidget/Client.tsx

@@ -5,6 +5,7 @@ import { cx } from "class-variance-authority"
 import { useSearchParams } from "next/navigation"
 import { use, useEffect, useRef, useState } from "react"
 import { FormProvider, useForm } from "react-hook-form"
+import { useIntl } from "react-intl"
 
 import { dt } from "@scandic-hotels/common/dt"
 import { useScrollLock } from "@scandic-hotels/common/hooks/useScrollLock"
@@ -12,7 +13,7 @@ import useStickyPosition from "@scandic-hotels/common/hooks/useStickyPosition"
 import { StickyElementNameEnum } from "@scandic-hotels/common/stores/sticky-position"
 import { debounce } from "@scandic-hotels/common/utils/debounce"
 import isValidJson from "@scandic-hotels/common/utils/isValidJson"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { trpc } from "@scandic-hotels/trpc/client"
 import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
 
@@ -66,6 +67,7 @@ export default function BookingWidgetClient({
     autoLock: false,
   })
   const shouldFetchAutoComplete = !!data.hotelId || !!data.city
+  const intl = useIntl()
 
   const { data: destinationsData, isPending } =
     trpc.autocomplete.destinations.useQuery(
@@ -257,13 +259,17 @@ export default function BookingWidgetClient({
         />
         <div className={styles.backdrop} onClick={closeMobileSearch} />
         <div className={formContainerClassNames}>
-          <button
+          <IconButton
             className={styles.close}
-            onClick={closeMobileSearch}
-            type="button"
-          >
-            <MaterialIcon icon="close" />
-          </button>
+            variant="Muted"
+            emphasis
+            aria-label={intl.formatMessage({
+              id: "common.close",
+              defaultMessage: "Close",
+            })}
+            onPress={closeMobileSearch}
+            iconName="close"
+          />
           <Form
             type={type}
             onClose={closeMobileSearch}