scinote-web/app/assets/stylesheets/dashboard/recent_work.scss

// scss-lint:disable SelectorDepth
// scss-lint:disable NestingDepth

.dashboard-container .recent-work-widget {
  grid-column: 3 / span 7;
  grid-row: 7 / span 6;

  .widget-title {
    flex-grow: 1;
  }

  .recent-work-container {
    height: 100%;
    padding: 0 8px;
    position: relative;

    .recent-work-item {
      color: $color-volcano;
      cursor: pointer;
      display: flex;
      line-height: 28px;
      padding: 0 8px;
      text-decoration: none;

      .object-name {
        flex-grow: 1;
        font-weight: bold;
        overflow: hidden;
        padding-right: 15px;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .object-type {
        @include font-small;
        color: $color-silver-chalice;
        flex-basis: 120px;
        flex-shrink: 0;
      }

      .object-changed {
        @include font-small;
        flex-basis: 160px;
        flex-shrink: 0;
      }

      &:hover {
        background: $color-concrete;
      }
    }

    .widget-placeholder {
      .no-results-arrow {
        font-size: 32px;
        padding-top: 50px;
      }
    }
  }
}

@media (max-width: 1700px) {
  .dashboard-container .recent-work-widget {
    grid-column: 4 / span 6;
  }
}


@media (max-width: 1300px) {
  .dashboard-container .recent-work-widget {
    grid-column: 5 / span 8;
  }
}

@media (max-width: 1000px) {
  .dashboard-container .recent-work-widget {
    grid-column: 1 / span 12;
    grid-row: 9 / span 4;

    .no-results {
      .no-results-arrow {
        display: none;
      }
    }
  }
}

@media (max-width: 700px) {
  .dashboard-container .recent-work-widget {
    --widget-header-size: 72px;
    grid-row: 3;
    min-height: 450px;

    .widget-title {
      flex-basis: 100%;
      line-height: 36px;
    }

    .recent-work-container {
      .recent-work-item {
        flex-wrap: wrap;
        margin: 5px 0;

        .object-name {
          flex-basis: 100%;
          line-height: 18px;
        }

        .object-type {
          flex-basis: 0;
          flex-grow: 1;
          line-height: 18px;
        }

        .object-changed {
          flex-basis: 0;
          flex-grow: 1;
          line-height: 18px;
          text-align: right;
        }
      }
    }
  }
}