ui/app/styles/layout/_sm-screen.scss

/*xs*/
@media (min-width: $screen-xs) {
  // 480px
  div.banner {
    padding: 0;

    .banner-head {
      display: block;
      position: relative;

      &::after {
        display: none;
      }
    }

    .banner-content {
      display: block;
      margin-left: 0;
      padding: 10px;

      span:first-of-type {
        display: block;
      }
    }
  }
}

/*small*/
@media (min-width: $screen-sm) {
  .col-sm-height {
    display: table-cell;
    float: none !important;
  }

  .col-sm-full-height {
    height: 100%;
  }

  div.banner {
    padding: 10px;

    .banner-head {
      display: inline;
      position: absolute;

      &::after {
        display: initial;
      }
    }

    .banner-content {
      margin-left: 150px;
      padding: 0 15px 0 0;

      span:first-of-type {
        display: initial;
      }
    }
  }

  UL.nav LI.dropdown:hover UL.dropdown-menu,
  UL.nav LI.dropdown:focus UL.dropdown-menu {
    margin-top: 0;

    LI A {
      text-transform: none;
    }
  }
}

/*695-959*/
@media (max-width: $screen-sm-max) {
  .stack-section {
    .header-right {
      width: 20%;
      margin: 0;
      border-top: dotted 1px $lightGray;

      &.count {
        width: 25%;
      }

      &.stack-actions {
        width: 11%;
      }

      &.stack-template {
        width: 50%;
      }
    }

    .header-left.name {
      width: 70%;
    }

    .stack-actions {
      text-align: center !important;
    }
  }

  /*responsive tables and nav 695-959*/

  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }

  thead {
    height: 0;
    position: absolute;
    top: -9999px;
    left: -9999px;

    & tr {
      position: absolute;
      top: -9999px;
      left: -9999px;
    }
  }

  tr {
    border: 1px solid $table-border-color;
    margin: 10px 0;

    &.sm-noborder {
      border-width: 0px;
    }
  }

  td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
    white-space: normal;
    text-align: left;
    width: 100% !important;
    border-right: none !important;

    & .spark-line {
      width: 44px !important;
    }
  }

  td:before {
    content: attr(data-title);
    width: 45%;
    margin-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
  }

  .stack-section .grid td.state {
    padding: 10px !important;
  }

  .grid TD.actions {
    position: static;
    text-align: left;
  }

  .stack-section {
    background: transparent !important;
  }

  .stack-section .grid TD, .stack-section .grid TH {
    border-bottom: 1px dotted $table-border-color !important;
    border-top: none;
    text-align: left !important;
  }

  .grid > thead > tr > th,
  .grid > thead > tr > td,
  .grid > tbody > tr > th,
  .grid > tbody > tr > td,
  .grid > tfoot > tr > th,
  .grid > tfoot > tr > td {
    border-top: none;
  }
}