diff --git a/frontend/pages/hosts/details/cards/Software/SoftwareTableConfig.tsx b/frontend/pages/hosts/details/cards/Software/SoftwareTableConfig.tsx index 377ffc74d7..0685071930 100644 --- a/frontend/pages/hosts/details/cards/Software/SoftwareTableConfig.tsx +++ b/frontend/pages/hosts/details/cards/Software/SoftwareTableConfig.tsx @@ -144,7 +144,10 @@ const condenseInstalledPaths = (installedPaths: string[]): string[] => { const tooltipTextWithLineBreaks = (lines: string[]) => { return lines.map((line) => { return ( - + {line}
@@ -352,6 +355,7 @@ export const generateSoftwareTableHeaders = ({ ); }, + disableSortBy: true, accessor: "installed_paths", Cell: (cellProps: IInstalledPathCellProps): JSX.Element => { const numInstalledPaths = cellProps.cell.value?.length || 0; @@ -378,6 +382,7 @@ export const generateSoftwareTableHeaders = ({ effect="solid" backgroundColor={COLORS["tooltip-bg"]} id={`installed_paths__${cellProps.row.original.id}`} + className="installed_paths__tooltip" data-html clickable delayHide={300} diff --git a/frontend/pages/hosts/details/cards/Software/_styles.scss b/frontend/pages/hosts/details/cards/Software/_styles.scss index 4e26ef96fd..c99bee710e 100644 --- a/frontend/pages/hosts/details/cards/Software/_styles.scss +++ b/frontend/pages/hosts/details/cards/Software/_styles.scss @@ -48,7 +48,7 @@ width: $col-md; } .version__header { - width: $col-sm; + width: $col-xs; } .vulnerabilities__header { min-width: 130px; @@ -63,6 +63,9 @@ .last_opened_at__header { display: none; } + .installed_paths__header { + display: none; + } .linkToFilteredHosts__header { min-width: 115px; } @@ -73,7 +76,7 @@ .source__header { display: table-cell; - width: $col-md; + width: $col-sm; } } } @@ -88,6 +91,27 @@ display: none; width: 0px; } + .installed_paths__cell { + display: none; + width: 0px; + + .installed_paths__tooltip { + max-width: 550px; + + // gap between each filepath + .tooltip__tooltip-text { + display: flex; + flex-direction: column; + gap: $pad-small; + + .tooltip__tooptip_text_line { + display: block; + word-wrap: break-word; + max-width: 550px; + } + } + } + } .hosts_count__cell { .hosts-cell__wrapper { display: flex; @@ -198,24 +222,43 @@ .last_opened_at__header { display: table-cell; } - .installed_paths__header { - width: $col-md; - } } tbody { .last_opened_at__cell { display: table-cell; } + .linkToFilteredHosts__cell { + .view-all-hosts-link { + width: 120px; + } + } + } + } + @media (min-width: $break-1500) { + thead { + .installed_paths__header { + display: table-cell; + width: $col-lg; + } + } + tbody { .installed_paths__cell { + display: table-cell; + padding: $pad-small 0; + + .text-cell { + width: $col-lg; + text-overflow: initial; + overflow: initial; + white-space: initial; + word-wrap: break-word; + margin-left: $pad-large; + } .tooltip { display: inline; // center tooltip with hovered text } } - - .linkToFilteredHosts__cell { - width: 120px; - } } } } diff --git a/frontend/styles/var/breakpoints.scss b/frontend/styles/var/breakpoints.scss index 1edccb1cdd..ca96ce52ec 100644 --- a/frontend/styles/var/breakpoints.scss +++ b/frontend/styles/var/breakpoints.scss @@ -1,4 +1,5 @@ $break-1600: 1600px; +$break-1500: 1500px; $break-1400: 1400px; $break-990: 990px; $break-768: 768px; diff --git a/frontend/styles/var/tables.scss b/frontend/styles/var/tables.scss index 1cd58ab8c1..793823854a 100644 --- a/frontend/styles/var/tables.scss +++ b/frontend/styles/var/tables.scss @@ -1,3 +1,4 @@ +$col-xs: 85px; // column size for under 10 characters $col-sm: 102px; // column size will "hug" its contents $col-md: 252px; // column size not including 24px padding on left and right (total width is 300px) $col-lg: 352px; // column size not including 24px padding on left and right (total width is 400px)