From 3615c488537426a783db40a07ba5b1bf979c3c07 Mon Sep 17 00:00:00 2001
From: Bianca Widstam <bianca.widstam@scandichotels.com>
Date: Wed, 9 Jul 2025 11:38:51 +0000
Subject: [PATCH] Merged in fix/SW-1827-map-ipad-breakpoint (pull request
 #2539)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix(SW-1827): change breakpoint for ipad to 900 for map view select hotel

* fix(SW-1827): change breakpoint for ipad to 900 for map view select hotel


Approved-by: Anton Gunnarsson
Approved-by: Matilda Landström
---
 .../SelectHotel/SelectHotelMap/HotelListing/index.tsx           | 2 +-
 .../SelectHotelMap/SelectHotelMapContainerSkeleton.module.css   | 2 +-
 .../SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx  | 2 +-
 .../SelectHotelMapContent/selectHotelMapContent.module.css      | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/index.tsx b/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/index.tsx
index 47be007d8..35e21be9e 100644
--- a/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/index.tsx
@@ -17,7 +17,7 @@ export default function HotelListing({
   unfilteredHotelCount,
 }: HotelListingProps) {
   const { activeHotel } = useHotelsMapStore()
-  const isMobile = useMediaQuery("(max-width: 767px)")
+  const isMobile = useMediaQuery("(max-width: 899px)")
 
   return isMobile ? (
     <div className={styles.hotelListingMobile} data-open={!!activeHotel}>
diff --git a/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton.module.css b/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton.module.css
index 4ab136b3e..ebff63b26 100644
--- a/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton.module.css
@@ -28,7 +28,7 @@
   flex: 1;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 900px) {
   .container {
     height: 100%;
   }
diff --git a/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx b/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx
index bac0d139c..c64b8fccc 100644
--- a/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx
@@ -50,7 +50,7 @@ export default function SelectHotelContent({
   const intl = useIntl()
   const map = useMap()
 
-  const isAboveMobile = useMediaQuery("(min-width: 768px)")
+  const isAboveMobile = useMediaQuery("(min-width: 900px)")
   const [visibleHotels, setVisibleHotels] = useState<HotelResponse[]>([])
   const [showSkeleton, setShowSkeleton] = useState<boolean>(true)
   const listingContainerRef = useRef<HTMLDivElement | null>(null)
diff --git a/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/selectHotelMapContent.module.css b/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/selectHotelMapContent.module.css
index 87409af38..837c65ddc 100644
--- a/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/selectHotelMapContent.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/selectHotelMapContent.module.css
@@ -35,7 +35,7 @@
   width: auto;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 900px) {
   .container .closeButton {
     display: flex;
   }