feat(BOOK-472): Different placement of no availability alert on mobile viewports

Approved-by: Bianca Widstam

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/NoAvailabilityAlert/index.tsx

@@ -1,4 +1,5 @@
 "use client"
+import { cx } from "class-variance-authority"
 import { useIntl } from "react-intl"
 
 import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
@@ -11,11 +12,15 @@ import useLang from "../../../../../hooks/useLang"
 
 import styles from "./alert.module.css"
 
+interface NoAvailabilityAlertProps {
+  roomIndex: number
+  className?: string
+}
+
 export default function NoAvailabilityAlert({
   roomIndex,
-}: {
-  roomIndex: number
-}) {
+  className,
+}: NoAvailabilityAlertProps) {
   const lang = useLang()
   const intl = useIntl()
 
@@ -51,7 +56,7 @@ export default function NoAvailabilityAlert({
       defaultMessage: "There are no rooms available that match your request.",
     })
     return (
-      <div className={styles.hotelAlert}>
+      <div className={cx(styles.hotelAlert, className)}>
         <Alert
           type={AlertTypeEnum.Info}
           heading={intl.formatMessage({
@@ -92,7 +97,7 @@ export default function NoAvailabilityAlert({
     )
 
     return (
-      <div className={styles.hotelAlert}>
+      <div className={cx(styles.hotelAlert, className)}>
         <Alert
           type={AlertTypeEnum.Info}
           heading={intl.formatMessage({