Merge pull request #509 from wpmudev/fix/SUI-85

fix(calendar): Ranges overlapping the calendar after a certain amount.
wpmudev · May 20, 2022 · e966501 · e966501
2 parents 26c375e + 342ba3a
commit e966501
Showing 1 changed file with 7 additions and 5 deletions.
diff --git a/assets/scss/shared-ui/_calendar-range.scss b/assets/scss/shared-ui/_calendar-range.scss
@@ -219,15 +219,13 @@
 
 		// VARIATION: Show ranges.
 		&.show-ranges {
-			padding-top: #{($sui-gutter-md - 1px) + math.div($sui-gutter, 2) + 18px};
+			padding-top: $sui-gutter-md;
 
 			.ranges {
 				display: block;
 				flex: 0 0 auto;
-				position: absolute;
-				top: $sui-gutter-md;
-				right: 0;
-				left: 0;
+				margin: 0 auto;
+				max-width: calc((#{$calendar-cell} * 14) + 20px);
 
 				ul {
 					width: 100%;
@@ -275,6 +273,10 @@
 						}
 					}
 				}
+
+				@include media(max-width, sm) {
+					max-width: calc(#{$calendar-cell} * 7);
+				}
 			}
 		}