Files
fleet/frontend/components/TableContainer/DataTable/TooltipTruncatedTextCell/_styles.scss
T

68 lines
1.5 KiB
SCSS

.tooltip-truncated-cell {
display: flex;
align-items: center; // For badges, etc
gap: $pad-small;
max-width: 100%;
.text-muted {
color: $ui-fleet-black-50;
}
.data-table__tooltip-truncated-text-container {
display: flex; // Flex container for text and suffix
align-items: center; // Keep text and suffix aligned
min-width: 0; // Prevent flex child from growing beyond container
}
.data-table__tooltip-truncated-text {
white-space: nowrap; /* Prevent wrapping */
overflow: hidden; /* Hide overflowing text */
text-overflow: ellipsis; /* Add ellipsis for truncated text */
&--cell {
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 101%;
}
.truncated {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
}
.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;
}
}
.data-table__suffix,
.data-table__prefix {
display: flex;
gap: $pad-small;
height: 24px;
align-items: center;
flex-shrink: 0; /* Prevent suffix from shrinking */
}
.__react_component_tooltip {
font-size: $xx-small;
}
}