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 ? ( + + + {children} + + + ) : ( + {children} + ); + }; + return ( 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;