style(SW-593): add wrapper

components/ContentType/HotelPage/Map/MobileMapToggle/index.tsx

@@ -39,34 +39,35 @@ export default function MobileMapToggle() {
   }, [handleScroll])
 
   return (
-    <div
+    <div ref={mapToggleRef} className={styles.wrapper}>
-      ref={mapToggleRef}
+      <div
-      className={`${styles.mobileToggle} ${isVisible ? "" : styles.hidden}`}
+        className={`${styles.mobileToggle} ${isVisible ? "" : styles.hidden}`}
-    >
-      <button
-        type="button"
-        className={`${styles.button} ${!isDynamicMapOpen ? styles.active : ""}`}
-        onClick={closeDynamicMap}
       >
-        <HouseIcon
+        <button
-          color={!isDynamicMapOpen ? "white" : "red"}
+          type="button"
-          height={24}
+          className={`${styles.button} ${!isDynamicMapOpen ? styles.active : ""}`}
-          width={24}
+          onClick={closeDynamicMap}
-        />
+        >
-        <span>{intl.formatMessage({ id: "Hotel" })}</span>
+          <HouseIcon
-      </button>
+            color={!isDynamicMapOpen ? "white" : "red"}
-      <button
+            height={24}
-        type="button"
+            width={24}
-        className={`${styles.button} ${isDynamicMapOpen ? styles.active : ""}`}
+          />
-        onClick={openDynamicMap}
+          <span>{intl.formatMessage({ id: "Hotel" })}</span>
-      >
+        </button>
-        <MapIcon
+        <button
-          color={isDynamicMapOpen ? "white" : "red"}
+          type="button"
-          height={24}
+          className={`${styles.button} ${isDynamicMapOpen ? styles.active : ""}`}
-          width={24}
+          onClick={openDynamicMap}
-        />
+        >
-        <span>{intl.formatMessage({ id: "Map" })}</span>
+          <MapIcon
-      </button>
+            color={isDynamicMapOpen ? "white" : "red"}
+            height={24}
+            width={24}
+          />
+          <span>{intl.formatMessage({ id: "Map" })}</span>
+        </button>
+      </div>
     </div>
   )
 }

components/ContentType/HotelPage/Map/MobileMapToggle/mobileToggle.module.css

@@ -1,8 +1,11 @@
-.mobileToggle {
+.wrapper {
+  margin: 0 auto;
   position: sticky;
   bottom: var(--Spacing-x5);
-  margin: 0 auto;
   z-index: 1;
+}
+
+.mobileToggle {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: var(--Spacing-x-half);
@@ -41,11 +44,11 @@
 }
 
 .hidden {
-  visibility: hidden;
+  display: none;
 }
 
 @media screen and (min-width: 1367px) {
-  .mobileToggle {
+  .wrapper {
     display: none;
   }
 }