mirror of
https://github.com/fleetdm/fleet
synced 2026-05-12 03:28:48 +00:00
19fe0ff5ce
## For #27667 - Have `TooltipTruncatedText` component use `useCheckTruncatedElement` to track its current state of truncation. - Update `useCheckTruncatedElement` to re-evaluate truncation state based on changes to the width of the element itself as opposed to changes to viewport width. This facilitates truncation when the width of the element is updated due to user interaction / change in UI state other than window resize, e.g. checking a policy in the policy software automations modal (see issue description for details reproduction instructions there). **Truncation with tooltip successful for UI state changes:**  Truncation with tooltip successful for viewport resizing:   - [x] Changes file added for user-visible changes in `changes/⁄ - [x] Manual QA for all new/changed functionality --------- Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
39 lines
810 B
SCSS
39 lines
810 B
SCSS
/** Modify with extreme caution as this CSS:
|
|
- determines whether a tooltip is being rendered via useRef
|
|
- is implemented in widely used checkbox labels
|
|
- is highly sensitive */
|
|
|
|
.tooltip-truncated-text {
|
|
max-width: 101%; // Required for implementation in checkbox labels
|
|
|
|
.tooltip-truncated {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.truncated {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.inner-text {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
.truncated-tooltip {
|
|
text-wrap: wrap;
|
|
overflow-wrap: break-word;
|
|
|
|
.safari-hack {
|
|
height: 0px;
|
|
}
|
|
}
|
|
|
|
// allows for the tooltip text to break on a word instead of a character
|
|
&.tooltip-break-on-word {
|
|
.truncated-tooltip {
|
|
word-break: normal;
|
|
}
|
|
}
|
|
}
|