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

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

.dashboard-background {
  background: $color-concrete;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}

.dashboard-view {
  --dashboard-widgets-gap: 30px;
  padding: calc(var(--dashboard-widgets-gap) / 2)
           calc(var(--dashboard-widgets-gap) / 2)
           var(--dashboard-widgets-gap);
}

.dashboard-header {
  padding-bottom: calc(var(--dashboard-widgets-gap) / 2);
}

.dashboard-container {
  --widget-header-size: 44px;
  display: grid;
  grid-auto-rows: 30em;
  grid-column-gap: var(--dashboard-widgets-gap);
  grid-row-gap: var(--dashboard-widgets-gap);
  grid-template-columns: repeat(auto-fit, minmax(7em, 1fr));
  width: 100%;

  .basic-widget {
    background: $color-white;
    border-radius: $border-radius-modal;
    box-shadow: $flyout-shadow;
    position: relative;

    &.large-widget {
      grid-column: auto / 9 span;
    }

    &.medium-widget {
      grid-column: auto / 6 span;
    }

    &.small-widget {
      grid-column: auto / 3 span;
    }

    .widget-header {
      align-items: center;
      border-bottom: $border-tertiary;
      display: flex;
      height: var(--widget-header-size);
      padding-left: 16px;

      .widget-title {
        @include font-h2;
        flex-shrink: 0;
      }
    }

    .widget-body {
      height: calc(100% - var(--widget-header-size));
      position: absolute;
      width: 100%;

      .widget-placeholder {
        color: $color-alto;
        padding: 24px;

        .widget-placeholder-title {
          @include font-h1;
        }

        .widget-placeholder-description {
          @include font-main;
        }
      }
    }
  }
}

@media (max-width: 1100px) {
  .dashboard-container {
    --dashboard-widgets-gap: 15px;
    grid-template-columns: 100%;

    .basic-widget {
      &.large-widget,
      &.medium-widget,
      &.small-widget {
        grid-column: auto / 1 span;
      }
    }
  }
}

@media (max-height: 800px) {
  .dashboard-container {
    grid-auto-rows: 24em;
  }
}

@media (min-height: 1300px) {
  .dashboard-container {
    grid-auto-rows: 36em;
  }
}

@media (max-width: 700px) {

  .dashboard-view {
    --dashboard-widgets-gap: 15px;
  }

  .dashboard-container {
    --widget-header-size: 72px;
    grid-auto-rows: auto;

    .basic-widget {
      &.large-widget,
      &.medium-widget,
      &.small-widget {
        grid-column: 1 span;
      }
    }

    .widget-header {
      flex-wrap: wrap;

      .sci-secondary-navbar {
        height: 36px;
      }
    }
  }
}