TimePicker: Fix position and responsive behavior (#26570)

* TimePicker: Fix position and responsive behavior

* Updated snapshots

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`

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"