fix(SW-591): fixed the position of the amenities list

components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css

@@ -6,8 +6,7 @@
   display: grid;
   gap: var(--Spacing-x-one-and-half);
   height: fit-content;
-  width: 100%;
+  width: min(100%, 300px);
-  max-width: 300px;
 }
 
 .amenityItemList {

components/ContentType/HotelPage/IntroSection/introSection.module.css

@@ -2,7 +2,7 @@
   display: grid;
   gap: var(--Spacing-x2);
   position: relative;
-  max-width: var(--max-width-text-block);
+  max-width: 607px; /* Max width according to Figma */
 }
 
 .mainContent {

components/ContentType/HotelPage/hotelPage.module.css

@@ -28,7 +28,9 @@
 }
 
 .introContainer {
-  display: grid;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
   gap: var(--Spacing-x4);
   scroll-margin-top: var(--hotel-page-scroll-margin-top);
 }

components/ContentType/HotelPage/index.tsx

@@ -75,51 +75,7 @@ export default async function HotelPage() {
             address={hotelAddress}
             tripAdvisor={hotelRatings?.tripAdvisor}
           />
-          <SidePeekProvider>
+
-            {/* eslint-disable import/no-named-as-default-member */}
-            <SidePeek
-              contentKey={hotelPageParams.amenities[lang]}
-              title={intl.formatMessage({ id: "Amenities" })}
-            >
-              {/* TODO: Render amenities as per the design. */}
-              Read more about the amenities here
-            </SidePeek>
-            <SidePeek
-              contentKey={hotelPageParams.about[lang]}
-              title={intl.formatMessage({ id: "Read more about the hotel" })}
-            >
-              Some additional information about the hotel
-            </SidePeek>
-            <SidePeek
-              contentKey={hotelPageParams.restaurantAndBar[lang]}
-              title={intl.formatMessage({ id: "Restaurant & Bar" })}
-            >
-              {/* TODO */}
-              Restaurant & Bar
-            </SidePeek>
-            <SidePeek
-              contentKey={hotelPageParams.wellnessAndExercise[lang]}
-              title={intl.formatMessage({ id: "Wellness & Exercise" })}
-            >
-              {/* TODO */}
-              Wellness & Exercise
-            </SidePeek>
-            <SidePeek
-              contentKey={hotelPageParams.activities[lang]}
-              title={intl.formatMessage({ id: "Activities" })}
-            >
-              {/* TODO */}
-              Activities
-            </SidePeek>
-            <SidePeek
-              contentKey={hotelPageParams.meetingsAndConferences[lang]}
-              title={intl.formatMessage({ id: "Meetings & Conferences" })}
-            >
-              {/* TODO */}
-              Meetings & Conferences
-            </SidePeek>
-            {/* eslint-enable import/no-named-as-default-member */}
-          </SidePeekProvider>
           <AmenitiesList detailedFacilities={hotelDetailedFacilities} />
         </div>
         <Rooms rooms={roomCategories} />
@@ -143,6 +99,51 @@ export default async function HotelPage() {
           />
         </>
       ) : null}
+      <SidePeekProvider>
+        {/* eslint-disable import/no-named-as-default-member */}
+        <SidePeek
+          contentKey={hotelPageParams.amenities[lang]}
+          title={intl.formatMessage({ id: "Amenities" })}
+        >
+          {/* TODO: Render amenities as per the design. */}
+          Read more about the amenities here
+        </SidePeek>
+        <SidePeek
+          contentKey={hotelPageParams.about[lang]}
+          title={intl.formatMessage({ id: "Read more about the hotel" })}
+        >
+          Some additional information about the hotel
+        </SidePeek>
+        <SidePeek
+          contentKey={hotelPageParams.restaurantAndBar[lang]}
+          title={intl.formatMessage({ id: "Restaurant & Bar" })}
+        >
+          {/* TODO */}
+          Restaurant & Bar
+        </SidePeek>
+        <SidePeek
+          contentKey={hotelPageParams.wellnessAndExercise[lang]}
+          title={intl.formatMessage({ id: "Wellness & Exercise" })}
+        >
+          {/* TODO */}
+          Wellness & Exercise
+        </SidePeek>
+        <SidePeek
+          contentKey={hotelPageParams.activities[lang]}
+          title={intl.formatMessage({ id: "Activities" })}
+        >
+          {/* TODO */}
+          Activities
+        </SidePeek>
+        <SidePeek
+          contentKey={hotelPageParams.meetingsAndConferences[lang]}
+          title={intl.formatMessage({ id: "Meetings & Conferences" })}
+        >
+          {/* TODO */}
+          Meetings & Conferences
+        </SidePeek>
+        {/* eslint-enable import/no-named-as-default-member */}
+      </SidePeekProvider>
     </div>
   )
 }