ui/app/styles/layout/_medium.scss

///768
@media only screen and (max-width: map-get($breakpoints, medium)) {
  .col {
    margin: 1% 0 1% 0%;
  }
  [class^='span-'],
  [class*='span-'] {
    width: 100%;
  }
  .col.offset-12:first-child,
  .offset-12,
  .col.offset-11:first-child,
  .offset-11,
  .col.offset-10:first-child,
  .offset-10,
  .col.offset-9:first-child,
  .offset-9,
  .col.offset-8:first-child,
  .offset-8,
  .col.offset-7:first-child,
  .offset-7,
  .col.offset-6:first-child,
  .offset-6,
  .col.offset-5:first-child,
  .offset-5,
  .col.offset-4:first-child,
  .offset-4,
  .col.offset-3:first-child,
  .offset-3,
  .col.offset-2:first-child,
  .offset-2,
  .col.offset-1:first-child,
  .offset-1 {
    margin-left: 0;
  }
  .hidden-md {
    display: none;
  }
  //tables
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: grid;
  }
  table {
    thead {
      // height: 0;
      & tr {
        display: none;
        visibility: hidden;
      }
    }
    tbody {
      tr {
        border: 1px solid $light-grey;

        &.sm-noborder {
          border-width: 0px;
        }
        td {
          border: none;
          position: relative;
          padding: 5px;
          white-space: normal;
          text-align: left;
          border-right: none !important;
          border-bottom: none !important;
          height: auto;
          &:before {
            content: attr(data-title);
            display: block;
            vertical-align: middle;
            white-space: nowrap;
            text-align: left;
            color: $info;
            padding-right: 5px;
            font-size: .8em;
            text-transform: uppercase;
            letter-spacing: .5px;
          }
          &:last-child {
            height: auto;
          }
          &.spark-line {
            width: 44px !important;
          }
          &.row-check {
            text-align: right;
            padding-right: 15px;
          }
          .resource-actions {
            display: inline-block;
          }

          .btn {
            white-space: wrap;
          }
        }
        &.main-row {
          margin-bottom: 20px;
          grid-template: auto 1fr / auto auto auto;
          // grid-template: auto 1fr / auto 1fr;
          border-top: 0;
          border-left: 0;

          td {
            // padding: 10px !important;
            display: block;
            text-align: left;
            border: solid thin $border;
            // > * {
            //   display: block;
            // }
            &.text-right {
              text-align: left!important;
            }
          }
        }
      }
      TR.group-row > TD {
        height: auto;
      }
    }
    .group-row {
      clear: both;
      position: relative;
      width: 100%;
      background: $table-bg-accent!important;
      display: table;

        > td {
          display: table-cell;
          padding: 10px 0;

          &:after {
            display: none;
          }

          &:nth-child(2) {
            padding: 10px;
            width: 290px;

            > p {
              display: inline-block;
            }
          }

          &:nth-child(4){
            text-align: right;
          }
        }
    }
    tr.sub-row {
      > td {
        padding: 0 15px;
      }
    }
  }
  .grid TD.actions {
    position: static;
    text-align: left;
  }
  .stack-section {
    background: transparent !important;
    .header-right {
      border: 0;
    }
  }
  .stack-section .grid TD,
  .stack-section .grid TH {
    border-bottom: 1px dotted $light-grey !important;
    border-top: none;
    text-align: left !important;
  }
  .stack-section .grid TD:last-child {
    border-bottom: 0!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;
  }

  //dropdowns
  .ember-basic-dropdown-content {
    width: calc(100% - 40px);
  }

  //nav
  .page-header NAV {
    &.responsive-nav {
      display: block;
      position: relative;
      background-color: $header;

      ul.nav-main {
        li {
          display: block;
        }
      }
    }

    .nav-user {
      float: right;
    }
  }


  nav > ul {
    background: darken($link-color, 5%);
  }

  nav .dropdown-menu > li > a {
    color: white;
  }

   nav .divider {
    display: none;
   }

  nav > ul > li.active > a,
  nav > ul > li > a:hover {
    border-bottom: 0;
  }

  nav .dropdown.pull-right {
    float: none!important;
    width: 100%;
  }

  ul.dropdown-menu.project-menu {
    position: static;
    display: block!important;
    width: 100%;
  }

  /* Class added via JS when toggled open */
  .nav-open {
    .nav-list {
      max-height: none;
      height: auto;
    }
  }

  /* NAV LIST*/
  .nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height .5s;
    -moz-transition: max-height .5s;
    -ms-transition: max-height .5s;
    -o-transition: max-height .5s;
    transition: max-height .5s;
  }


  /*NAV LIST ITEMS*/
  .nav-main {
    .nav-item {
      border-top: 1px solid rgba(255,255,255,.15);
    }
  }

  .nav-item {
    .dropdown-menu {
      display: block;
      width: 100%;
      position: initial;
      float: none;
      background-color: $header;
    }
  }
  .js .nav-list {
    position: absolute;
    z-index: 1000;
  }
  .nav-item, .nav-link {
    display: block;
    border-bottom: 0;
  }
  .nav-link {
    .active {
      border: none;
    }
  }
  /*NAV LINKS*/
  .nav-link, .nav-toggle {
    color: #fff;
    display: block;
    white-space: nowrap;
  }
  nav > ul > li > a {
    border-top: 0;
    border-bottom: 0;
    width: 100%;
  }

  /*TOGGLE BUTTON*/
  .nav-toggle {
    display: inline-block;
    background: darken($header, 5%);
    min-width: 51px;
    box-sizing: border-box;
    line-height: 51px;
    text-align: center;
  }
  .nav-toggle:before {
    content: "☰";
    font-size: 18px;
    text-align: center;
  }
  .nav-toggle:hover {
    text-decoration: none;
  }
  .nav-open .nav-toggle {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  .nav-open .nav-toggle:before {
    content: "✕";
  }

  .page-header .logo-oss {
    width: 75px;
    background-image: url(images/logos/rancher-logo-cow-white.svg);
    background-size: 75%;
    margin-left: 10px;
  }

  .page-header NAV .nav-list .dropdown-menu {
    background: transparent;
    box-shadow: none;
    max-width: 100%;
  }

  .page-header .nav-cluster {
    float: none;

    .ember-basic-dropdown-trigger {
      max-width: none;
    }

    .ember-basic-dropdown-content {
      width: inherit;
    }
  }

  .ember-basic-dropdown-content {
    position: static;
  }

  .fixed-header-actions {
    position: relative !important;
  }

    //stack catalog boxes
  .namespace-app {
    width: 100%;
    float: none;
    margin: 15px 0 0 0;
    .stack-info {
      display: block;
    }

    .catalog-icon {
      width: 120px;
      height: 120px;
    }
    .stack-info-row, .catalog-icon {
    display: inline-block;}
  }

  //dashboard
  .percent-gauge-container {
    .span-4 {
      width: 32.333%;
    }
  }
  .cluster-launch {
    .cluster-driver-box {
      &.small {
        &.otccce {
          p {
            margin: 15px 0px; // initial padding from root
          }
        }
      }
    }
  }
}