sidebar responsive style

VSG-EMEA · Jul 3, 2024 · 643a2ef · 643a2ef
1 parent 487e6e3
commit 643a2ef
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 47 deletions.
diff --git a/src/components/Mapbox/style.scss b/src/components/Mapbox/style.scss
@@ -1,51 +1,48 @@
 // the map
 .wp-block-vsge-mapbox .map-wrapper {
-	display: flex;
-	overflow: hidden;
-	gap: 24px;
-	width: 100%;
+  display: flex;
+  overflow: hidden;
+  gap: 24px;
+  width: 100%;
 
-	@media (max-width: 600px) {
-		gap: var(--wp--preset--spacing--20);
+  @media (max-width: 600px) {
+    gap: var(--wp--preset--spacing--20);
     flex-direction: column-reverse;
-	}
-
-	.map {
-		flex-grow: 1;
-		height: 100%;
-	}
-
-	.map-container {
-		width: 100%;
-		margin: 0;
-		flex-grow: 1;
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-
-		@media (max-width: 600px) {
-			width: 100vw;
-		}
-
-		.mapboxgl-canvas {
-			bottom: 0;
-		}
-
-		.mapboxgl-popup-content {
-			max-width: 280px;
-
-			@media (max-width: 600px) {
-				width: 100%;
-				max-width: 100%;
-				min-width: inherit;
-			}
-		}
-
-		.mapboxgl-popup-anchor-top {
-
-			> .mapboxgl-popup-tip {
-				border-bottom-color: var(--mapbox--color--white);
-			}
-		}
-	}
+    min-height: 100vh;
+  }
+
+  .map {
+    flex-grow: 1;
+    height: 100%;
+  }
+
+  .map-container {
+    width: 100%;
+    margin: 0;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+
+    .mapboxgl-canvas {
+      bottom: 0;
+    }
+
+    .mapboxgl-popup-content {
+      max-width: 280px;
+
+      @media (max-width: 600px) {
+        width: 100%;
+        max-width: 100%;
+        min-width: inherit;
+      }
+    }
+
+    .mapboxgl-popup-anchor-top {
+
+      > .mapboxgl-popup-tip {
+        border-bottom-color: var(--mapbox--color--white);
+      }
+    }
+  }
 }
diff --git a/src/components/Sidebar/style.scss b/src/components/Sidebar/style.scss
@@ -9,9 +9,11 @@
 		flex-direction: column;
 
 		@media (max-width: 600px) {
-      max-height: 20vh;
+      max-height: 25vh;
       width: 100%;
       max-width: inherit;
+      padding: 0 10px;
+      box-sizing: border-box;
 		}
 
 		p {

diff --git a/src/components/TopBar/style.scss b/src/components/TopBar/style.scss
@@ -7,6 +7,10 @@
 		margin-left: auto;
 		white-space: pre;
 
+    @media (max-width: 600px) {
+      padding: 0 8px;
+    }
+
 		&-hidden {
 			display: none;
 		}
@@ -29,6 +33,11 @@
 				text-overflow: ellipsis;
 				margin: 0 0.25rem;
 				padding: 0 0.5rem;
+
+        @media (max-width: 600px) {
+          width: 100%;
+          font-size: 13px;
+        }
 			}
 
 			&-input-control__backdrop {
@@ -43,6 +52,12 @@
 			border: 1px solid var(--wp--preset--color--cyan-bluish-gray);
 			padding: 0 0.5rem;
 
+      @media (max-width: 600px) {
+        font-size: 0;
+        margin: 0;
+        text-align: center;
+      }
+
 			&:focus,
 			&:hover {
 				filter: inherit !important;
@@ -57,6 +72,9 @@
 				vertical-align: sub;
 				line-height: var(--mabox-topbar-height);
 				margin-right: 0.5rem;
+        @media (max-width: 600px) {
+          margin: 0
+        }
 			}
 		}