.dashboard-view-picker {
  background-color: $header-grey;
  border-bottom: 1px solid $ilios-blue;

  margin: 0;
  padding: .5em;
  width: 100%;

  ul {
    @include ilios-list-reset;

    li {
      display: inline;
    }
  }

  button {
    @include ilios-button;

    &.active {
      background-color: $ilios-green;
    }

    &:focus {
      outline: 0;
    }
  }
}

.dashboard-view-picker {
  background-color: $header-grey;
  border-bottom: 1px solid $ilios-blue;

  margin: 0;
  padding: .5em;
  width: 100%;

  ul {
    @include ilios-list-reset;
    display: flex;
    justify-content: space-around;

    @include for-tablet-and-up {
      justify-content: flex-start;

      li {
        margin-right: 3em;
      }
    }
  }

  button {
    @include ilios-button;

    &.active {
      background-color: $ilios-green;
    }

    &:focus {
      outline: 0;
    }
  }
}

Use flex layout for dashboard buttons
Use flex layout for dashboard buttons

This keeps them from wrapping and spaces them out better on small screens.
