fleet/frontend/pages/software/ManageSoftwarePage/_styles.scss

.manage-software-page {
  &__header-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 38px;

    .button-wrap {
      display: flex;
      justify-content: flex-end;
      min-width: 266px;
    }
  }

  &__manage-automations {
    padding: $pad-small $pad-medium;
  }

  &__count {
    display: flex;
    gap: 12px;
  }

  &__header {
    display: flex;
    align-items: center;

    .form-field {
      margin-bottom: 0;
    }
  }

  &__text {
    margin-right: $pad-large;
  }

  &__title {
    font-size: $large;
  }

  &__description {
    margin: 0;
    margin-bottom: $pad-large;
    max-width: 75%;
    @media (min-width: $break-md) {
      max-width: none;
    }

    h2 {
      text-transform: uppercase;
      color: $core-fleet-black;
      font-weight: $regular;
      font-size: $small;
    }

    p {
      color: $ui-fleet-black-75;
      margin: 0;
      font-size: $x-small;
      font-style: italic;
    }
  }

  &__table {
    .table-container {
      &__header {
        flex-direction: column-reverse; // Search bar on top

        @media (min-width: $break-md) {
          flex-direction: row;
        }
      }

      &__header-left {
        flex-direction: row; // Filter dropdown aligned with count
        .controls {
          .form-field--dropdown {
            margin: 0;
          }
          .manage-software-page__vuln_dropdown {
            .Select-menu-outer {
              width: 250px;
              max-height: 310px;
              .Select-menu {
                max-height: none;
              }
            }
            .Select-value {
              padding-left: $pad-medium;
              padding-right: $pad-medium;
            }
            .dropdown__custom-value-label {
              width: 155px; // Override 105px for longer text options
            }
          }
        }
      }
      &__search-input,
      &__search {
        width: 100%; // Search bar across entire table
        .input-icon-field__input {
          width: 100%;
        }
        @media (min-width: $break-md) {
          width: auto;
          .input-icon-field__input {
            width: 375px;
          }
        }
      }
      &__data-table-block {
        .data-table-block {
          .data-table__table {
            tr {
              .software-link {
                opacity: 0;
                transition: opacity 250ms;
              }

              &:hover {
                .software-link {
                  opacity: 1;
                }
              }
            }

            thead {
              .name__header {
                width: $col-md;
              }
              .version__header {
                width: 0;
              }
              .vulnerabilities__header {
                display: none;
                width: 0;
              }
              .source__header {
                display: none;
                width: 0;
              }
              .hosts_count__header {
                width: auto;
                border-right: 0;
              }
              @media (min-width: $break-md) {
                .vulnerabilities__header {
                  display: table-cell;
                }
              }
              @media (min-width: $break-lg) {
                .version__header {
                  width: $col-md;
                }
                .source__header {
                  display: table-cell;
                }
              }
            }

            tbody {
              .name__cell {
                max-width: $col-md;
                // Tooltip does not get cut off
                .children-wrapper {
                  overflow: initial;
                }
              }
              .version__cell {
                width: 0;
              }
              .source__cell {
                display: none;
                width: 0;
              }
              .vulnerabilities__cell {
                display: none;
                width: 0;
                span {
                  display: inline;
                }
                .text-muted {
                  color: $ui-fleet-black-50;
                }
              }
              .hosts_count__cell {
                width: auto;
                .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-md) {
                .vulnerabilities__cell {
                  display: table-cell;
                }
              }
              @media (min-width: $break-lg) {
                .version_cell {
                  width: $col-md;
                }
                .source__cell {
                  display: table-cell;
                }
              }
            }
          }
        }
      }
    }
  }
}