[8.x] [ES|QL] Vertical align expand icon in history component (#207042)…

… (#207301)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ES|QL] Vertical align expand icon in history component
(#207042)](#207042)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Stratoula
Kalafateli","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-01-21T09:10:47Z","message":"[ES|QL]
Vertical align expand icon in history component (#207042)\n\n##
Summary\r\n\r\nCloses
https://github.com/elastic/kibana/issues/204072\r\n\r\nAligns in top the
expandable icon in the history component\r\n\r\n<img width=\"1675\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/0a2a98ae-759f-408e-9a30-dd0c7f884153\"\r\n/>\r\n\r\n\r\nIt
also fixes a small bug. When the query was expanded and the
user\r\nresized the window, the icon was
vanished.","sha":"4a6891ff9f896d49a9eb6816e075cfdb0cfa17e7","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Feature:ES|QL","Team:ESQL","backport:version","v8.18.0"],"title":"[ES|QL]
Vertical align expand icon in history
component","number":207042,"url":"https://github.com/elastic/kibana/pull/207042","mergeCommit":{"message":"[ES|QL]
Vertical align expand icon in history component (#207042)\n\n##
Summary\r\n\r\nCloses
https://github.com/elastic/kibana/issues/204072\r\n\r\nAligns in top the
expandable icon in the history component\r\n\r\n<img width=\"1675\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/0a2a98ae-759f-408e-9a30-dd0c7f884153\"\r\n/>\r\n\r\n\r\nIt
also fixes a small bug. When the query was expanded and the
user\r\nresized the window, the icon was
vanished.","sha":"4a6891ff9f896d49a9eb6816e075cfdb0cfa17e7"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/207042","number":207042,"mergeCommit":{"message":"[ES|QL]
Vertical align expand icon in history component (#207042)\n\n##
Summary\r\n\r\nCloses
https://github.com/elastic/kibana/issues/204072\r\n\r\nAligns in top the
expandable icon in the history component\r\n\r\n<img width=\"1675\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/0a2a98ae-759f-408e-9a30-dd0c7f884153\"\r\n/>\r\n\r\n\r\nIt
also fixes a small bug. When the query was expanded and the
user\r\nresized the window, the icon was
vanished.","sha":"4a6891ff9f896d49a9eb6816e075cfdb0cfa17e7"}},{"branch":"8.x","label":"v8.18.0","branchLabelMappingKey":"^v8.18.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Stratoula Kalafateli <[email protected]>

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: [],

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 (
     <>