diff --git a/changes/issue-6776-prevent-horizontal-scrolling b/changes/issue-6776-prevent-horizontal-scrolling new file mode 100644 index 0000000000..5e234a959c --- /dev/null +++ b/changes/issue-6776-prevent-horizontal-scrolling @@ -0,0 +1 @@ +* Use responsive design to prevent tooltip from horizontally overflowing off viewport \ No newline at end of file diff --git a/frontend/pages/software/SoftwareDetailsPage/components/Vulnerabilities/VulnTableConfig.tsx b/frontend/pages/software/SoftwareDetailsPage/components/Vulnerabilities/VulnTableConfig.tsx index f049384b88..c52029d5f0 100644 --- a/frontend/pages/software/SoftwareDetailsPage/components/Vulnerabilities/VulnTableConfig.tsx +++ b/frontend/pages/software/SoftwareDetailsPage/components/Vulnerabilities/VulnTableConfig.tsx @@ -146,7 +146,7 @@ const generateVulnTableHeaders = (isPremiumTier: boolean): IDataColumn[] => { const titleWithToolTip = ( + The vulnerability has been actively exploited in the wild. This data is reported by the Cybersecurity and Infrustructure Security Agency (CISA). `} > diff --git a/frontend/pages/software/SoftwareDetailsPage/components/Vulnerabilities/_styles.scss b/frontend/pages/software/SoftwareDetailsPage/components/Vulnerabilities/_styles.scss index d4299185f9..1500f5f4c5 100644 --- a/frontend/pages/software/SoftwareDetailsPage/components/Vulnerabilities/_styles.scss +++ b/frontend/pages/software/SoftwareDetailsPage/components/Vulnerabilities/_styles.scss @@ -23,7 +23,8 @@ .section--vulnerabilities { .component__tooltip-wrapper__tip-text { - max-width: none; + max-width: $col-md; + white-space: normal; } .data-table-block { @@ -38,6 +39,15 @@ .cvss_score__header { width: $col-sm; } + + @media (max-width: $tooltip-break-1000) { + .cisa_known_exploit__header { + .component__tooltip-wrapper__tip-text { + max-width: 200px; // Prevents horizontal scrolling off viewport + white-space: normal; + } + } + } } tr { diff --git a/frontend/styles/var/breakpoints.scss b/frontend/styles/var/breakpoints.scss index 6b01ef7d5f..1edccb1cdd 100644 --- a/frontend/styles/var/breakpoints.scss +++ b/frontend/styles/var/breakpoints.scss @@ -2,3 +2,4 @@ $break-1600: 1600px; $break-1400: 1400px; $break-990: 990px; $break-768: 768px; +$tooltip-break-1000: 1000px; // Prevents horizontal scrolling off viewport