From 93a4b8e8e40d2711279341f8bef85920d0c5efc3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 24 Jul 2020 16:48:02 +0200
Subject: [PATCH] TimePicker: Fix position and responsive behavior (#26570)

* TimePicker: Fix position and responsive behavior

* Updated snapshots
---
 .../TimePicker/TimeRangePicker/TimePickerContent.tsx   | 10 ++--------
 .../__snapshots__/TimePickerContent.test.tsx.snap      |  6 +++---
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerContent.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerContent.tsx
index a640ff77c92..a533214dc33 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerContent.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerContent.tsx
@@ -22,18 +22,12 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       z-index: ${theme.zIndex.modal};
       width: 546px;
       top: 116%;
-      margin-left: -322px;
       border-radius: 2px;
       border: 1px solid ${containerBorder};
+      right: 0;
 
       @media only screen and (max-width: ${theme.breakpoints.lg}) {
-        width: 218px;
-        margin-left: 6px;
-      }
-
-      @media only screen and (max-width: ${theme.breakpoints.sm}) {
-        width: 264px;
-        margin-left: -100px;
+        width: 262px;
       }
     `,
     body: css`
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/__snapshots__/TimePickerContent.test.tsx.snap b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/__snapshots__/TimePickerContent.test.tsx.snap
index 671c9b9a0cd..df8ffb04c98 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/__snapshots__/TimePickerContent.test.tsx.snap
+++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/__snapshots__/TimePickerContent.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`TimePickerContent renders correctly in full screen 1`] = `
 <div
-  className="css-1py9bjs"
+  className="css-ajr8sn"
 >
   <div
     className="css-ooqtr4"
@@ -103,7 +103,7 @@ exports[`TimePickerContent renders correctly in full screen 1`] = `
 
 exports[`TimePickerContent renders correctly in narrow screen 1`] = `
 <div
-  className="css-1py9bjs"
+  className="css-ajr8sn"
 >
   <div
     className="css-ooqtr4"
@@ -200,7 +200,7 @@ exports[`TimePickerContent renders correctly in narrow screen 1`] = `
 
 exports[`TimePickerContent renders recent absolute ranges correctly 1`] = `
 <div
-  className="css-1py9bjs"
+  className="css-ajr8sn"
 >
   <div
     className="css-ooqtr4"