From e137f7af60a9d0c35ff6c3e73050303b94d6bf41 Mon Sep 17 00:00:00 2001
From: Paul Sealock <psealock@gmail.com>
Date: Wed, 29 Aug 2018 14:50:34 +1200
Subject: [PATCH] DaptePicker: fix erorr message popover

---
 .../client/components/calendar/style.scss     | 40 +++++++++++--------
 .../client/components/filters/date/style.scss |  2 +-
 2 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/plugins/woocommerce-admin/client/components/calendar/style.scss b/plugins/woocommerce-admin/client/components/calendar/style.scss
index 40ee79593af..892e9c36b9b 100644
--- a/plugins/woocommerce-admin/client/components/calendar/style.scss
+++ b/plugins/woocommerce-admin/client/components/calendar/style.scss
@@ -126,24 +126,32 @@
 	}
 }
 
-.woocommerce-calendar__input-error {
-	display: none;
+.woocommerce-filters-date__content {
+	.woocommerce-calendar__input-error {
+		display: none;
 
-	.components-popover__content {
-		background-color: $core-grey-dark-400;
-		color: $white;
-		padding: 0.5em;
-		border: none;
+		.components-popover__content {
+			background-color: $core-grey-dark-400;
+			color: $white;
+			padding: 0.5em;
+			border: none;
+		}
+
+		&.components-popover {
+			.components-popover__content {
+				min-width: 100px;
+				text-align: center;
+			}
+
+			&:not(.no-arrow):not(.is-mobile).is-bottom:before {
+				border-bottom-color: $core-grey-dark-400;
+				z-index: 1;
+				top: -6px;
+			}
+		}
 	}
 
-	&.components-popover {
-		.components-popover__content {
-			min-width: 100px;
-			text-align: center;
-		}
-
-		&:not(.no-arrow):after {
-			border-color: $core-grey-dark-400;
-		}
+	&.is-mobile .woocommerce-calendar__input-error .components-popover__content {
+		height: initial;
 	}
 }
diff --git a/plugins/woocommerce-admin/client/components/filters/date/style.scss b/plugins/woocommerce-admin/client/components/filters/date/style.scss
index 5261596b999..3870ffe45cc 100644
--- a/plugins/woocommerce-admin/client/components/filters/date/style.scss
+++ b/plugins/woocommerce-admin/client/components/filters/date/style.scss
@@ -12,7 +12,7 @@
 		}
 
 		.components-tab-panel__tab-content {
-			height: calc(100% - $gap-larger);
+			height: calc(100% - 36px);
 		}
 	}
 }