fix timepicker styles

src/panels/corpglory-dataexporter-panel/components/Panel.tsx

@@ -1,4 +1,5 @@
 import { PanelOptions, TaskTableRowConfig, QueryTableRowConfig, DatasourceType } from '../types';
+import { css } from '@emotion/css';
 
 import { convertTimestampToDate, getDashboardUid } from '../../../utils';
 import { CLOSE_ICON_BASE_64, DOWNLOAD_ICON_BASE_64, SELECT_ICON_BASE_64, UNSELECT_ICON_BASE_64 } from '../../../icons';
@@ -8,7 +9,16 @@ import { getDashboardByUid, getDatasources } from '../../../services/grafana_bac
 
 import { contextSrv } from 'grafana/app/core/core';
 
-import { Table, Button, HorizontalGroup, Modal, LoadingPlaceholder, TimeRangeInput } from '@grafana/ui';
+import {
+  Table,
+  Button,
+  HorizontalGroup,
+  VerticalGroup,
+  Modal,
+  LoadingPlaceholder,
+  TimeRangeInput,
+  useStyles2,
+} from '@grafana/ui';
 import {
   PanelProps,
   toDataFrame,
@@ -352,6 +362,8 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
     setQueries(updatedQueries);
   }
 
+  const styles = useStyles2(getStyles);
+
   return (
     <div>
       {tasksDataFrame === null ? (
@@ -370,24 +382,31 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
             >
               Add Task
             </Button>
-            <Modal title="Select Queries" isOpen={isModalOpen} onDismiss={onCloseModal}>
+            <Modal
+              title="Select Queries"
+              isOpen={isModalOpen}
+              onDismiss={onCloseModal}
+              className={styles.calendarModal}
+            >
               {queriesDataFrame === null ? (
                 // TODO: if datasource responds with error, display the error
                 <LoadingPlaceholder text="Loading..."></LoadingPlaceholder>
               ) : (
                 <div>
-                  <Table width={width / 2 - 20} height={height - 40} data={queriesDataFrame} />
+                  <VerticalGroup spacing="xs">
-                  <HorizontalGroup justify="flex-end" spacing="md">
+                    <HorizontalGroup justify="flex-start" spacing="md">
                       <TimeRangeInput
                         value={selectedTimeRange}
                         onChange={(newTimeRange) => {
                           setTimeRange(newTimeRange);
                         }}
                       />
+                    </HorizontalGroup>
+                    <Table width={width / 2 - 20} height={height - 40} data={queriesDataFrame} />
+                    <HorizontalGroup justify="flex-end" spacing="md">
                       <Button
                         variant="primary"
                         aria-label="Add task button"
-                      style={{ marginTop: '8px' }}
                         onClick={onAddTaskClick}
                         // TODO: move to function
                         disabled={!queries?.filter((query: QueryTableRowConfig) => query.selected)?.length}
@@ -395,6 +414,7 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
                         Add Task
                       </Button>
                     </HorizontalGroup>
+                  </VerticalGroup>
                 </div>
               )}
             </Modal>
@@ -404,3 +424,13 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
     </div>
   );
 }
+
+const getStyles = () => ({
+  calendarModal: css`
+    section {
+      position: fixed;
+      top: 20%;
+      z-index: 1061;
+    }
+  `,
+});