Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-23 17:08:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 83

Software details UI: Fix horizontal scroll off viewport (#6811)

Browse source
This commit is contained in:
RachelElysia 2022-07-22 14:03:06 -04:00 committed by GitHub
parent 99ae9c8a9e
commit 3915a5294b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 14 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
changes/issue-6776-prevent-horizontal-scrolling Normal file
View file

@ -0,0 +1 @@
* Use responsive design to prevent tooltip from horizontally overflowing off viewport

2
frontend/pages/software/SoftwareDetailsPage/components/Vulnerabilities/VulnTableConfig.tsx
View file

@ -146,7 +146,7 @@ const generateVulnTableHeaders = (isPremiumTier: boolean): IDataColumn[] => {
const titleWithToolTip = (
<TooltipWrapper
tipContent={`
The vulnerability has been actively exploited in the wild. This data is reported by<br />
The vulnerability has been actively exploited in the wild. This data is reported by
the Cybersecurity and Infrustructure Security Agency (CISA).
`}
>

12
frontend/pages/software/SoftwareDetailsPage/components/Vulnerabilities/_styles.scss
View file

@ -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 {

1
frontend/styles/var/breakpoints.scss
View file

@ -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