From f12bedece72e4ae575c4505ef20c08af86f4ecc3 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Thu, 6 Nov 2025 15:31:14 -0500
Subject: [PATCH] Fleet UI: Fix table selection styling (#35295)

---
 changes/34685-header-selection-css-fixes      |  1 +
 .../TableContainer/DataTable/_styles.scss     | 13 ++++----
 .../forms/fields/Checkbox/Checkbox.tsx        | 30 +++++++++++--------
 frontend/styles/var/padding.scss              |  1 +
 4 files changed, 26 insertions(+), 19 deletions(-)
 create mode 100644 changes/34685-header-selection-css-fixes

diff --git a/changes/34685-header-selection-css-fixes b/changes/34685-header-selection-css-fixes
new file mode 100644
index 0000000000..c392042722
--- /dev/null
+++ b/changes/34685-header-selection-css-fixes
@@ -0,0 +1 @@
+- Fleet UI: Fixed table styling for selecting table rows
diff --git a/frontend/components/TableContainer/DataTable/_styles.scss b/frontend/components/TableContainer/DataTable/_styles.scss
index 864b9fa7f3..99083f7a5f 100644
--- a/frontend/components/TableContainer/DataTable/_styles.scss
+++ b/frontend/components/TableContainer/DataTable/_styles.scss
@@ -98,7 +98,7 @@ $shadow-transition-width: 10px;
       }
 
       th {
-        padding: 0 $pad-large;
+        padding: 0 $table-cell-padding;
         white-space: nowrap;
         border-left: 1px solid $ui-fleet-black-10;
         font-weight: $bold;
@@ -109,8 +109,9 @@ $shadow-transition-width: 10px;
           border-left: none;
         }
 
-        &.selection__header {
-          width: 22px;
+        &.selection__header,
+        &.active-selection__checkbox {
+          width: 16px;
           padding: 0 $pad-medium;
         }
 
@@ -150,8 +151,6 @@ $shadow-transition-width: 10px;
 
         // Sort arrows change color on hover
         .sortable-header {
-          padding: $pad-xsmall 0;
-
           .column-header {
             .header-cell {
               min-height: 36px;
@@ -204,7 +203,7 @@ $shadow-transition-width: 10px;
       }
 
       &__container {
-        padding: 0 20px;
+        padding: 0 $table-cell-padding;
       }
 
       &__inner {
@@ -272,7 +271,7 @@ $shadow-transition-width: 10px;
 
       td {
         height: 40px;
-        padding: 0 $pad-large;
+        padding: 0 $table-cell-padding;
         max-width: 500px;
         word-wrap: break-word;
 
diff --git a/frontend/components/forms/fields/Checkbox/Checkbox.tsx b/frontend/components/forms/fields/Checkbox/Checkbox.tsx
index 585de6b752..15456d5cf6 100644
--- a/frontend/components/forms/fields/Checkbox/Checkbox.tsx
+++ b/frontend/components/forms/fields/Checkbox/Checkbox.tsx
@@ -139,6 +139,23 @@ const Checkbox = (props: ICheckboxProps) => {
     return icon;
   };
 
+  const renderLabel = () => {
+    if (!children) return null;
+
+    return labelTooltipContent ? (
+      <span className={`${baseClass}__label-tooltip tooltip`}>
+        <TooltipWrapper
+          tipContent={labelTooltipContent}
+          clickable={false} // Not block form behind tooltip
+        >
+          {children}
+        </TooltipWrapper>
+      </span>
+    ) : (
+      <span className={`${baseClass}__label`}>{children}</span>
+    );
+  };
+
   return (
     <FormField {...formFieldProps}>
       <label htmlFor={name}>
@@ -165,18 +182,7 @@ const Checkbox = (props: ICheckboxProps) => {
           onBlur={onBlur}
         >
           {renderIcon()}
-          {labelTooltipContent ? (
-            <span className={`${baseClass}__label-tooltip tooltip`}>
-              <TooltipWrapper
-                tipContent={labelTooltipContent}
-                clickable={false} // Not block form behind tooltip
-              >
-                {children}
-              </TooltipWrapper>
-            </span>
-          ) : (
-            <span className={`${baseClass}__label`}>{children}</span>
-          )}
+          {renderLabel()}
         </div>
       </label>
     </FormField>
diff --git a/frontend/styles/var/padding.scss b/frontend/styles/var/padding.scss
index 60138f80a0..3fbad1243b 100644
--- a/frontend/styles/var/padding.scss
+++ b/frontend/styles/var/padding.scss
@@ -21,3 +21,4 @@ $gap-form-component: $pad-small;
 $gap-data-sets: $pad-medium;
 $gap-table-elements: $pad-medium;
 $gap-modal-component: $pad-large;
+$table-cell-padding: $pad-large;