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/DatePicker/Range/Mobile.tsx

@@ -6,7 +6,7 @@ import { useIntl } from "react-intl"
 import { Lang } from "@scandic-hotels/common/constants/language"
 import { dt } from "@scandic-hotels/common/dt"
 import { Button } from "@scandic-hotels/design-system/Button"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useLang from "../../../../hooks/useLang"
@@ -72,9 +72,17 @@ export default function DatePickerRangeMobile({
   return (
     <div className={styles.container} ref={monthsRef}>
       <header className={styles.header}>
-        <button className={styles.close} onClick={close} type="button">
-          <MaterialIcon icon="close" />
-        </button>
+        <IconButton
+          className={styles.close}
+          variant="Muted"
+          emphasis
+          aria-label={intl.formatMessage({
+            id: "common.close",
+            defaultMessage: "Close",
+          })}
+          onPress={close}
+          iconName="close"
+        />
       </header>
       <DayPicker
         classNames={{