fleet/frontend/pages/SoftwarePage/SoftwareTitles/SoftwareTable/_styles.scss

.software-table {
  &__software-filter {
    min-width: 240px;
  }

  &__filter-controls {
    display: flex;
    align-items: center;
    gap: $pad-medium;
  }

  &__filters {
    .component__tooltip-wrapper__element {
      display: flex;
      align-items: center;
    }

    .children-wrapper {
      gap: $pad-small;
    }
  }

  .table-container {
    &__results-count {
      .form-field--slider {
        align-self: center;
      }
    }

    &__search-input,
    &__search {
      width: 100%; // Search bar across entire table

      .input-icon-field__input {
        min-width: 213px;
        height: 36px;
      }

      @media (min-width: $table-controls-break) {
        width: auto;

        .input-icon-field__input {
          width: 310px; // Any wider would run up against time ago header
        }
      }
    }

    &__data-table-block {
      .data-table-block {
        .data-table__table {
          thead {
            .name__header {
              width: $col-md;
            }

            @media (min-width: $break-lg) {
              // expand the width of version header at larger screen sizes
              .versions__header {
                width: $col-md;
              }
            }
          }

          tbody {
            .name__cell {
              max-width: $col-md;

              // Tooltip does not get cut off
              .children-wrapper {
                overflow: initial;
              }

              // ellipsis for software name
              .software-name {
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }

            .hosts_count__cell {
              .hosts-cell__wrapper {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .hosts-cell__link {
                  display: flex;
                  white-space: nowrap;
                }
              }
            }

            @media (min-width: $break-sm) {
              .name__cell {
                max-width: $col-lg;
              }
            }

            @media (min-width: $break-lg) {
              .versions__cell {
                width: $col-md;
              }
            }
          }
        }
      }
    }
  }

  // needed to handle overflow of the table data on small screens
  .data-table {
    &__wrapper {
      overflow-x: auto;
    }
  }
  .view-all-hosts {
    &__cell {
      display: flex;
      justify-content: flex-end;
    }
  }
}