fleet/frontend/components/TableContainer/DataTable/TruncatedTextCell/_styles.scss

.truncated-cell {
  .text-muted {
    color: $ui-fleet-black-50;
  }
  .data-table__truncated-text {
    &--cell {
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      max-width: 101%;
    }

    .truncated {
      display: inline-block;
      max-width: 100%;

      // Removes secondary unstyled tooltip created by browser
      &::after {
        content: "";
        display: block;
      }
    }
  }

  // allows for the tooltip text to break on a word instead of a character
  &.tooltip-break-on-word {
    .truncated-tooltip {
      word-break: normal;
    }
  }

  // Responsive design overrides react-tooltip width that overflows off screen
  .truncated-tooltip {
    max-width: 300px;
    word-break: break-all;
    overflow-wrap: break-word;
    display: block;
    white-space: pre-wrap;

    .safari-hack {
      height: 0px;
    }
  }

  @media (min-width: $break-md) {
    .truncated-tooltip {
      max-width: 400px;
    }
  }

  @media (min-width: $break-lg) {
    .truncated-tooltip {
      max-width: 800px;
    }
  }
}