feat(responsive): ensure popover fits in small devices viewport

rapid-build-ui · Feb 23, 2019 · 2241fcb · 2241fcb
1 parent 70eb32f
commit 2241fcb
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 1 deletion.
diff --git a/src/client/styles/layout/popover.scss b/src/client/styles/layout/popover.scss
@@ -4,7 +4,7 @@
 .popover {
 	position: absolute;
 	z-index: 1060;
-	max-width: 276px; // TODO: make responsive, 255px fits iphone
+	max-width: 276px;
 	width: -moz-max-content; // firefox
 	width: max-content;
 	cursor: auto;

diff --git a/src/client/styles/layout/responsive.scss b/src/client/styles/layout/responsive.scss
@@ -0,0 +1,15 @@
+/*********************
+ * RESPONSIVE LAYOUTS
+ *********************/
+// extra small screens (includes iphone portrait)
+@media (max-width: 375px) {
+	.popover {
+		max-width: 245px;
+	}
+}
+// small screens (includes iphone plus portrait)
+@media (min-width: 376px) and (max-width: 414px) {
+	.popover {
+		max-width: 255px;
+	}
+}
diff --git a/src/client/styles/rb-popover.scss b/src/client/styles/rb-popover.scss
@@ -12,6 +12,10 @@
 @import 'layout/pointer.scss';
 @import 'layout/popover.scss';
 
+/* Responsive Layout
+ ********************/
+@import 'layout/responsive.scss';
+
 /* CSS Style Variables
  **********************/
 @import 'variables/common.scss';