[9.3] [Security Solution] fix wrong alignment of buttons in Timeline (#268314) (#268562)

# Backport

This will backport the following commits from `main` to `9.3`:
- [[Security Solution] fix wrong alignment of buttons in Timeline
(#268314)](#268314)

<!--- Backport version: 9.6.6 -->

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

<!--BACKPORT [{"author":{"name":"Philippe
Oberti","email":"philippe.oberti@elastic.co"},"sourceCommit":{"committedDate":"2026-05-09T01:00:53Z","message":"[Security
Solution] fix wrong alignment of buttons in Timeline
(#268314)","sha":"15e710dcb8c2ca4028f75536431354b963789068","branchLabelMapping":{"^v9.5.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Threat
Hunting","backport:version","v9.5.0","v9.3.5","v9.4.1"],"title":"[Security
Solution] fix wrong alignment of buttons in
Timeline","number":268314,"url":"https://github.com/elastic/kibana/pull/268314","mergeCommit":{"message":"[Security
Solution] fix wrong alignment of buttons in Timeline
(#268314)","sha":"15e710dcb8c2ca4028f75536431354b963789068"}},"sourceBranch":"main","suggestedTargetBranches":["9.3","9.4"],"targetPullRequestStates":[{"branch":"main","label":"v9.5.0","branchLabelMappingKey":"^v9.5.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/268314","number":268314,"mergeCommit":{"message":"[Security
Solution] fix wrong alignment of buttons in Timeline
(#268314)","sha":"15e710dcb8c2ca4028f75536431354b963789068"}},{"branch":"9.3","label":"v9.3.5","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"9.4","label":"v9.4.1","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Philippe Oberti <philippe.oberti@elastic.co>

Author: kibanamachine

x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/toolbar_additional_controls.tsx

@@ -4,8 +4,9 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { EuiToolTip, EuiButtonIcon } from '@elastic/eui';
-import React, { useMemo, useCallback, useRef } from 'react';
+
+import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
+import React, { useCallback, useMemo, useRef } from 'react';
 
 import { isActiveTimeline } from '../../../../../helpers';
 import { TimelineId } from '../../../../../../common/types/timeline';
@@ -69,10 +70,18 @@ export const ToolbarAdditionalControlsComponent: React.FC<Props> = ({ timelineId
 
   return (
     <>
-      <RowRendererSwitch timelineId={timelineId} />
-      <StatefulRowRenderersBrowser timelineId={timelineId} />
-      <LastUpdatedContainer updatedAt={updatedAt} />
-      <span className="rightPosition">
+      <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
+        <EuiFlexItem grow={false}>
+          <RowRendererSwitch timelineId={timelineId} />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <StatefulRowRenderersBrowser timelineId={timelineId} />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <LastUpdatedContainer updatedAt={updatedAt} />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <span style={{ position: 'absolute', right: 0 }}>
         <EuiToolTip
           ref={toolTipRef}
           content={fullScreen ? i18n.EXIT_FULL_SCREEN : i18n.FULL_SCREEN}
@@ -81,7 +90,7 @@ export const ToolbarAdditionalControlsComponent: React.FC<Props> = ({ timelineId
           <EuiButtonIcon
             aria-label={fullScreen ? i18n.EXIT_FULL_SCREEN : i18n.FULL_SCREEN}
             className={`${fullScreen ? EXIT_FULL_SCREEN_CLASS_NAME : ''}`}
-            color={fullScreen ? 'text' : 'primary'}
+            color="text"
             data-test-subj={
               // a full screen button gets created for timeline and for the host page
               // this sets the data-test-subj for each case so that tests can differentiate between them

x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/unified_components/styles.tsx

@@ -196,15 +196,6 @@ export const StyledTimelineUnifiedDataTable = styled.div.attrs(({ className = ''
     width: fit-content;
   }
 
-  .udtTimeline .rightPosition {
-    position: absolute;
-    right: 5px;
-
-    button {
-      ${({ theme }) => `color: ${theme.eui.euiColorDarkShade};`}
-    }
-  }
-
   .udtTimeline .euiDataGrid__rightControls {
     padding-right: 30px;
   }