[ES|QL] Fixes the visibility of the datepicker (#214728)

## Summary

Fixes the visibility of the timepicker on the dashboard

<img width="720" alt="image"
src="https://github.com/user-attachments/assets/9fd40aa4-b334-4854-8b01-e106fd2e1f11"
/>

and the position in case the editor doesnt have a lot of space. in that
scenario we move the timepicker to the right

<img width="759" alt="image"
src="https://github.com/user-attachments/assets/7a8dbccf-ae42-452a-9046-4308a2a783bb"
/>

Author: stratoula

src/platform/packages/private/kbn-esql-editor/src/esql_editor.tsx

@@ -59,6 +59,7 @@ import type { ESQLEditorProps, ESQLEditorDeps, ControlsContext } from './types';
 
 // for editor width smaller than this value we want to start hiding some text
 const BREAKPOINT_WIDTH = 540;
+const DATEPICKER_WIDTH = 373;
 
 const triggerControl = async (
   queryString: string,
@@ -255,8 +256,12 @@ export const ESQLEditor = memo(function ESQLEditor({
       const editorLeft = editorCoords.left;
 
       // Calculate the absolute position of the popover
-      const absoluteTop = editorTop + (editorPosition?.top ?? 0) + 20;
-      const absoluteLeft = editorLeft + (editorPosition?.left ?? 0);
+      const absoluteTop = editorTop + (editorPosition?.top ?? 0) + 25;
+      let absoluteLeft = editorLeft + (editorPosition?.left ?? 0);
+      if (absoluteLeft > editorCoords.width) {
+        // date picker is out of the editor
+        absoluteLeft = absoluteLeft - DATEPICKER_WIDTH;
+      }
 
       setPopoverPosition({ top: absoluteTop, left: absoluteLeft });
       datePickerOpenStatusRef.current = true;
@@ -887,6 +892,8 @@ export const ESQLEditor = memo(function ESQLEditor({
               borderRadius: theme.euiTheme.border.radius.small,
               position: 'absolute',
               overflow: 'auto',
+              zIndex: 1001,
+              border: theme.euiTheme.border.thin,
             }}
             ref={popoverRef}
             data-test-subj="ESQLEditor-timepicker-popover"