From bc8ebbd2f3b2274bd2cf478b1491219a85274aba Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Mon, 1 Apr 2024 22:20:36 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20bizarre=20checkbox=20bug?=
 =?UTF-8?q?=20that=20only=20affects=20header=20cells?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/table/table_cells_shared.styles.ts | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/table/table_cells_shared.styles.ts b/src/components/table/table_cells_shared.styles.ts
index e8c0bd140711..6c30695d682f 100644
--- a/src/components/table/table_cells_shared.styles.ts
+++ b/src/components/table/table_cells_shared.styles.ts
@@ -9,7 +9,11 @@
 import { css } from '@emotion/react';
 
 import { UseEuiTheme } from '../../services';
-import { euiFontSize, logicalCSS } from '../../global_styling';
+import {
+  euiFontSize,
+  logicalCSS,
+  logicalTextAlignCSS,
+} from '../../global_styling';
 
 import { euiTableVariables } from './table.styles';
 
@@ -64,6 +68,10 @@ export const euiTableCellCheckboxStyles = (euiThemeContext: UseEuiTheme) => {
   return {
     euiTableHeaderCellCheckbox: css`
       ${sharedCheckboxStyles}
+
+      /* Without this the visually hidden checkbox doesn't line up properly with the custom render 🙃
+         TODO: Could be removed if we use inset: 0 on checkboxes once they're converted to Emotion */
+      ${logicalTextAlignCSS('left')}
     `,
     euiTableRowCellCheckbox: css`
       ${sharedCheckboxStyles}