From 82445df259fe8a101670e02466c44134849a8a3d Mon Sep 17 00:00:00 2001
From: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
Date: Tue, 21 Jan 2025 10:10:47 +0100
Subject: [PATCH] [ES|QL] Vertical align expand icon in history component
 (#207042)

## Summary

Closes https://github.com/elastic/kibana/issues/204072

Aligns in top the expandable icon in the history component

<img width="1675" alt="image"
src="https://github.com/user-attachments/assets/0a2a98ae-759f-408e-9a30-dd0c7f884153"
/>

It also fixes a small bug. When the query was expanded and the user
resized the window, the icon was vanished.

(cherry picked from commit 4a6891ff9f896d49a9eb6816e075cfdb0cfa17e7)
---
 .../src/editor_footer/history_starred_queries.test.tsx   | 3 +++
 .../src/editor_footer/history_starred_queries.tsx        | 9 +++++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.test.tsx b/src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.test.tsx
index ba00e7eae6359..98c0977437fb1 100644
--- a/src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.test.tsx
+++ b/src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.test.tsx
@@ -78,6 +78,7 @@ describe('Starred and History queries components', () => {
           field: 'queryString',
           name: 'Query',
           render: expect.anything(),
+          css: expect.anything(),
         },
         {
           'data-test-subj': 'timeRan',
@@ -120,6 +121,7 @@ describe('Starred and History queries components', () => {
           field: 'queryString',
           name: 'Query',
           render: expect.anything(),
+          css: expect.anything(),
         },
         {
           'data-test-subj': 'timeRan',
@@ -171,6 +173,7 @@ describe('Starred and History queries components', () => {
         field: 'queryString',
         name: 'Query',
         render: expect.anything(),
+        css: expect.anything(),
       },
       {
         actions: [],
diff --git a/src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.tsx b/src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.tsx
index 069cd74eb83da..e129c1a1d8b54 100644
--- a/src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.tsx
+++ b/src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.tsx
@@ -194,6 +194,11 @@ export const getTableColumns = (
       name: i18n.translate('esqlEditor.query.recentQueriesColumnLabel', {
         defaultMessage: 'Query',
       }),
+      css: css`
+        .euiTableCellContent {
+          align-items: flex-start;
+        }
+      `,
       render: (queryString: QueryHistoryItem['queryString']) => (
         <QueryColumn
           queryString={queryString}
@@ -408,9 +413,9 @@ export function QueryColumn({
   useEffect(() => {
     if (containerRef.current) {
       const textIsOverlapping = containerRef.current.offsetWidth < containerRef.current.scrollWidth;
-      setIsExpandable(textIsOverlapping);
+      setIsExpandable(textIsOverlapping || isRowExpanded);
     }
-  }, [containerWidth]);
+  }, [containerWidth, isRowExpanded, queryString]);
 
   return (
     <>