[ES|QL] Vertical align expand icon in history component (elastic#207042)

## Summary Closes elastic#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.
viduni94 · Jan 23, 2025 · 1635d59 · 1635d59
1 parent 8fe615c
commit 1635d59
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/...tform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.test.tsx b/...tform/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
@@ -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 (
     <>