feat(sw-453): fixed mobile view and some improvements

components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css

@@ -5,7 +5,7 @@
   left: 0;
   right: 0;
   background-color: var(--Base-Surface-Primary-light-Normal);
-  padding: var(--Spacing-x3) var(--Spacing-x7) var(--Spacing-x5);
+  padding: var(--Spacing-x2) var(--Spacing-x3) var(--Spacing-x5);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -13,10 +13,50 @@
 
 .summaryPrice {
   display: flex;
+  width: 100%;
   gap: var(--Spacing-x4);
 }
 
 .petInfo {
   border-left: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
   padding-left: var(--Spacing-x2);
+  display: none;
+}
+
+.summaryText {
+  display: none;
+}
+
+.summaryPriceTextDesktop {
+  display: none;
+}
+
+.continueButton {
+  margin-left: auto;
+  height: fit-content;
+  width: 100%;
+}
+
+.summaryPriceTextMobile {
+  white-space: nowrap;
+}
+
+@media (min-width: 768px) {
+  .summary {
+    padding: var(--Spacing-x3) var(--Spacing-x7) var(--Spacing-x5);
+  }
+  .petInfo,
+  .summaryText,
+  .summaryPriceTextDesktop {
+    display: block;
+  }
+  .summaryPriceTextMobile {
+    display: none;
+  }
+  .summaryPrice {
+    width: auto;
+  }
+  .continueButton {
+    width: auto;
+  }
 }