Fleet UI: Fix table selection styling (#35295)

changes/34685-header-selection-css-fixes

@@ -0,0 +1 @@
+- Fleet UI: Fixed table styling for selecting table rows

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;
 

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>

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;