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/GuestsRoomsPicker/Form.tsx

@@ -5,6 +5,7 @@ import { useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { Button } from "@scandic-hotels/design-system/Button"
+import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
@@ -114,9 +115,17 @@ export default function GuestsRoomsPickerDialog({
     <>
       <section className={styles.contentWrapper}>
         <header className={styles.header}>
-          <button type="button" className={styles.close} onClick={onClose}>
-            <MaterialIcon icon="close" />
-          </button>
+          <IconButton
+            className={styles.close}
+            variant="Muted"
+            emphasis
+            aria-label={intl.formatMessage({
+              id: "common.close",
+              defaultMessage: "Close",
+            })}
+            onPress={onClose}
+            iconName="close"
+          />
         </header>
 
         <div className={styles.contentContainer}>