diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/HotelDescription/hotelDescription.module.css b/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/HotelDescription/hotelDescription.module.css
index b8dd42ba5..ab25649ad 100644
--- a/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/HotelDescription/hotelDescription.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/HotelDescription/hotelDescription.module.css
@@ -1,11 +1,11 @@
.hotelDescription {
overflow: hidden;
+ text-align: left;
}
.descriptionWrapper {
display: flex;
flex-direction: column;
- align-items: center;
}
.collapsed {
@@ -13,17 +13,19 @@
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
+ margin: var(--Space-x15) 0;
}
.expanded {
display: block;
max-height: none;
+ margin: var(--Space-x15) 0;
}
.expandedContent {
display: flex;
flex-direction: column;
- align-items: center;
+ align-items: flex-start;
margin-top: var(--Space-x2);
}
@@ -34,7 +36,6 @@
.showMoreButton {
display: flex;
- align-items: flex-end;
background-color: transparent;
border-width: 0;
padding: 0;
@@ -55,11 +56,9 @@
.facilityList {
display: flex;
- align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
gap: var(--Space-x15);
- padding-bottom: var(--Space-x2);
}
.facilitiesItem {
diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/HotelDescription/index.tsx b/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/HotelDescription/index.tsx
index aa81038d9..309c9b6a8 100644
--- a/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/HotelDescription/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/HotelDescription/index.tsx
@@ -4,7 +4,6 @@ import { useState } from "react"
import { Button as ButtonRAC } from "react-aria-components"
import { useIntl } from "react-intl"
-import { Alert } from "@scandic-hotels/design-system/Alert"
import { FacilityToIcon } from "@scandic-hotels/design-system/FacilityToIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -84,15 +83,8 @@ export default function HotelDescription({
defaultMessage: "See all amenities",
})}
buttonVariant="primary"
+ wrapping={false}
/>
- {hotel.specialAlerts.map((alert) => (
-
- ))}
)}
diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css b/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css
index af8af740a..780e109fd 100644
--- a/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css
@@ -45,17 +45,19 @@
.hotelAddressDescription {
display: flex;
flex-direction: column;
- gap: var(--Space-x2);
+ gap: var(--Space-x15);
align-items: center;
text-align: center;
}
-.hotelAlert {
+.facilities {
display: none;
}
-.facilities {
- display: none;
+.hotelAlert {
+ max-width: var(--max-width-page);
+ margin: 0 auto;
+ padding-top: var(--Space-x15);
}
@media screen and (min-width: 768px) {
@@ -72,13 +74,6 @@
display: block;
}
- .hotelAlert {
- display: block;
- max-width: var(--max-width-page);
- margin: 0 auto;
- padding-top: var(--Space-x15);
- }
-
.facilities {
display: flex;
flex-direction: column;
@@ -89,11 +84,11 @@
.facilityList {
display: flex;
+ flex-direction: column;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
- gap: var(--Space-x15);
- padding-bottom: var(--Space-x1);
+ gap: var(--Space-x1);
}
.facilitiesItem {
@@ -107,8 +102,8 @@
}
.hotelContent {
+ flex-direction: row;
gap: var(--Space-x6);
- align-items: normal;
}
.hotelInformation {
@@ -121,6 +116,7 @@
.hotelAddressDescription {
align-items: normal;
text-align: left;
+ gap: var(--Space-x2);
}
.wrapper {
@@ -128,22 +124,10 @@
flex-direction: row;
}
- .facilities {
- padding: var(--Space-x3) var(--Space-x3) var(--Space-x05);
- }
-
- .facilityList {
- gap: var(--Space-x1);
- padding-bottom: var(--Space-x05);
- flex-direction: column;
- }
.facilityTitle {
display: none;
}
- .hotelContent {
- flex-direction: row;
- align-items: center;
- }
+
.imageWrapper {
align-self: center;
}
diff --git a/apps/scandic-web/components/SidePeeks/HotelDetailsSidePeek/index.tsx b/apps/scandic-web/components/SidePeeks/HotelDetailsSidePeek/index.tsx
index 685da518f..f07ce1149 100644
--- a/apps/scandic-web/components/SidePeeks/HotelDetailsSidePeek/index.tsx
+++ b/apps/scandic-web/components/SidePeeks/HotelDetailsSidePeek/index.tsx
@@ -24,6 +24,7 @@ interface HotelDetailsSidePeekProps {
additionalHotelData: AdditionalData | undefined
triggerLabel: string
buttonVariant: "primary" | "secondary"
+ wrapping?: boolean
}
const buttonPropsMap: Record<
@@ -52,6 +53,7 @@ export default function HotelDetailsSidePeek({
restaurants,
additionalHotelData,
triggerLabel,
+ wrapping = true,
buttonVariant,
}: HotelDetailsSidePeekProps) {
const buttonProps = buttonPropsMap[buttonVariant]
@@ -60,7 +62,7 @@ export default function HotelDetailsSidePeek({