diff --git a/frontend/components/TableContainer/DataTable/SoftwareNameCell/_styles.scss b/frontend/components/TableContainer/DataTable/SoftwareNameCell/_styles.scss index 06abda8c1b..0b9ede8371 100644 --- a/frontend/components/TableContainer/DataTable/SoftwareNameCell/_styles.scss +++ b/frontend/components/TableContainer/DataTable/SoftwareNameCell/_styles.scss @@ -12,17 +12,6 @@ height: 24px; } - .software-name { - @include ellipse-text(); - max-width: 300px; - } - - @media (max-width: ($break-md - 1)) { - .software-name { - max-width: 250px; - } - } - &__install-icon { // TODO: we do not want to use !important but have to for now. This is // the same issue as the .software-name-cell class display value. diff --git a/frontend/components/TableContainer/DataTable/TooltipTruncatedTextCell/TooltipTruncatedTextCell.tsx b/frontend/components/TableContainer/DataTable/TooltipTruncatedTextCell/TooltipTruncatedTextCell.tsx index 89d4a2c33d..dcaacdddd3 100644 --- a/frontend/components/TableContainer/DataTable/TooltipTruncatedTextCell/TooltipTruncatedTextCell.tsx +++ b/frontend/components/TableContainer/DataTable/TooltipTruncatedTextCell/TooltipTruncatedTextCell.tsx @@ -14,8 +14,6 @@ interface ITooltipTruncatedTextCellProps { /** If set to `true` the text inside the tooltip will break on words instead of any character. * By default the tooltip text breaks on any character. Default: false */ tooltipBreakOnWord?: boolean; - /** @deprecated use the prop `className` in order to add custom classes to this component */ - classes?: string; className?: string; /** Content does not get truncated */ prefix?: React.ReactNode; @@ -29,12 +27,11 @@ const TooltipTruncatedTextCell = ({ value, tooltip, tooltipBreakOnWord = false, - classes = "w250", className, prefix, suffix, }: ITooltipTruncatedTextCellProps): JSX.Element => { - const classNames = classnames(baseClass, classes, className, { + const classNames = classnames(baseClass, className, { "tooltip-break-on-word": tooltipBreakOnWord, }); diff --git a/frontend/components/TableContainer/DataTable/TooltipTruncatedTextCell/_styles.scss b/frontend/components/TableContainer/DataTable/TooltipTruncatedTextCell/_styles.scss index d874b34f63..54fbb2a58c 100644 --- a/frontend/components/TableContainer/DataTable/TooltipTruncatedTextCell/_styles.scss +++ b/frontend/components/TableContainer/DataTable/TooltipTruncatedTextCell/_styles.scss @@ -2,6 +2,7 @@ display: flex; align-items: center; // For badges, etc gap: $pad-small; + max-width: 100%; .text-muted { color: $ui-fleet-black-50; diff --git a/frontend/components/TableContainer/DataTable/_styles.scss b/frontend/components/TableContainer/DataTable/_styles.scss index 460a057318..0d7e57e1c3 100644 --- a/frontend/components/TableContainer/DataTable/_styles.scss +++ b/frontend/components/TableContainer/DataTable/_styles.scss @@ -321,6 +321,8 @@ $shadow-transition-width: 10px; } &.link-cell--tooltip-truncate { + min-width: 100%; // Take up as much of cell as possible + .data-table__tooltip-truncated-text-container { position: relative; @include bottom-border; diff --git a/frontend/pages/hosts/details/HostDetailsPage/modals/RunScriptModal/ScriptsTableConfig.tsx b/frontend/pages/hosts/details/HostDetailsPage/modals/RunScriptModal/ScriptsTableConfig.tsx index 23b35de2c4..dc0043afa9 100644 --- a/frontend/pages/hosts/details/HostDetailsPage/modals/RunScriptModal/ScriptsTableConfig.tsx +++ b/frontend/pages/hosts/details/HostDetailsPage/modals/RunScriptModal/ScriptsTableConfig.tsx @@ -109,10 +109,11 @@ export const generateTableColumnConfigs = ( className="script-info" onClick={onClickScriptName} variant="inverse" + size="small" > ); diff --git a/frontend/pages/hosts/details/HostDetailsPage/modals/RunScriptModal/_styles.scss b/frontend/pages/hosts/details/HostDetailsPage/modals/RunScriptModal/_styles.scss index 47eb7ab5a1..6894c1b1e3 100644 --- a/frontend/pages/hosts/details/HostDetailsPage/modals/RunScriptModal/_styles.scss +++ b/frontend/pages/hosts/details/HostDetailsPage/modals/RunScriptModal/_styles.scss @@ -27,6 +27,12 @@ } } + .button { + .truncated-tooltip { + font-weight: $regular; // Undo button font-weight of 600 to match other tooltips 400 + } + } + // style a basic span that doesn't use the dropdown component (which relies on react-select // and makes it difficult for us to style the disabled tooltip underline on the placeholder text. .run-script-action--disabled { diff --git a/frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsErrorCell/OSSettingsErrorCell.tsx b/frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsErrorCell/OSSettingsErrorCell.tsx index 78c6ecfee6..eea0592963 100644 --- a/frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsErrorCell/OSSettingsErrorCell.tsx +++ b/frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsErrorCell/OSSettingsErrorCell.tsx @@ -330,8 +330,6 @@ const OSSettingsErrorCell = ({ tooltipBreakOnWord tooltip={tooltip} value={value} - // we dont want the default "w250" class so we pass in empty string - classes="" className={ isFailed || showRefetchButton || showRotateButton ? `${baseClass}__failed-message` diff --git a/frontend/pages/hosts/details/cards/HostSoftwareLibrary/_styles.scss b/frontend/pages/hosts/details/cards/HostSoftwareLibrary/_styles.scss index 766fd00c64..3ad5bfb907 100644 --- a/frontend/pages/hosts/details/cards/HostSoftwareLibrary/_styles.scss +++ b/frontend/pages/hosts/details/cards/HostSoftwareLibrary/_styles.scss @@ -83,6 +83,9 @@ .data-table__table { tbody { tr { + .name__cell { + max-width: 250px; + } .status__cell { display: table-cell; min-width: 140px; // Fixed width when status changes after clicking install/uninstall diff --git a/frontend/pages/hosts/details/cards/Software/_styles.scss b/frontend/pages/hosts/details/cards/Software/_styles.scss index 79a9afd9e0..36187e3ce3 100644 --- a/frontend/pages/hosts/details/cards/Software/_styles.scss +++ b/frontend/pages/hosts/details/cards/Software/_styles.scss @@ -56,6 +56,11 @@ max-width: px-to-rem(140); } } + tbody { + .name__cell { + max-width: 250px; + } + } } @media (max-width: ($break-sm - 1)) {