style(SW-593): add wrapper

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

@@ -39,8 +39,8 @@ export default function MobileMapToggle() {
   }, [handleScroll])
 
   return (
+    <div ref={mapToggleRef} className={styles.wrapper}>
       <div
-      ref={mapToggleRef}
         className={`${styles.mobileToggle} ${isVisible ? "" : styles.hidden}`}
       >
         <button
@@ -68,5 +68,6 @@ export default function MobileMapToggle() {
           <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;
   }
 }