scinote-web/app/assets/stylesheets/navigation/general.scss

body {
  min-width: 1140px;
}

body.navigator-collapsed {
  min-width: 900px;
}

.sci--layout {
  --breadcrumbs-navigation-height: 44px;
  --left-navigation-width: 192px;
  --navbar-height: calc(var(--top-navigation-height) + var(--breadcrumbs-navigation-height));
  --title-row-height: 4em;
  --top-navigation-height: 72px;
  display: grid;
  grid-template-areas: "left top top"
                       "left breadcrumbs breadcrumbs"
                       "left navigator content";
  grid-template-columns: var(--left-navigation-width)
                         var(--navigator-navigation-width)
                         calc(100% - var(--left-navigation-width) - var(--navigator-navigation-width));
  grid-template-rows: var(--top-navigation-height)
                      var(--breadcrumbs-navigation-height)
                      calc(100% - var(--top-navigation-height) - var(--breadcrumbs-navigation-height));
  height: 100%;
  position: relative;
  transition: .4s $timing-function-sharp;
  width: 100%;

  .sci--layout--navigator-open {
    display: none;
  }

  &[data-breadcrumbs-collapsed="true"] {
    --breadcrumbs-navigation-height: 0px;
  }

  &[data-navigator-collapsed="true"] {
    --navigator-navigation-width: 0px;

    .sci--layout--navigator-open {
      display: inline-block;

      + h1 {
        max-width: calc(100% - 2.5rem);
      }
    }
  }

  &[data-left-navigation-collapsed="true"] {
    --left-navigation-width: 0px;
  }

  .sci--layout-navigation-top {
    grid-area: top;
    height: var(--top-navigation-height);
    width: 100%;
    z-index: 610;
  }

  .sci--layout-navigation-left {
    grid-area: left;
    height: 100vh;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    width: var(--left-navigation-width);
    z-index: 600;
  }

  .sci--layout-navigation-navigator {
    --navigator-top-margin: 0px;
    background-color: var(--sn-white);
    grid-area: navigator;
    height: calc(100vh - var(--navbar-height) - 1rem - var(--navigator-top-margin));
    position: sticky;
    position: -webkit-sticky;
    top: 1rem;
    transition: width .4s $timing-function-sharp;
    width: var(--navigator-navigation-width);
    z-index: 550;
  }

  .sci--layout-navigation-breadcrumbs {
    background-color: var(--sn-white);
    grid-area: breadcrumbs;
    height: var(--breadcrumbs-navigation-height);
    transition: .4s $timing-function-sharp;
    width: 100%;
    z-index: 600;
  }

  .sci--layout-content {
    background-color: var(--sn-white);
    grid-area: content;
    padding: 0 1rem;
    width: 100%;

    .container-fluid {
      padding: 1em; // override bootstrap and old pages support
    }
  }

  &[data-grey-background="true"] {
    background-color: var(--sn-super-light-grey);

    .sci--layout-content,
    .sci--layout-navigation-breadcrumbs,
    .sci--layout-navigation-navigator {
      background-color: var(--sn-super-light-grey);

    }
  }
}

.w-98 {
  width: 98%;
}