luminance/src/App.module.css

.appWrapper {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.mobileContent,
.mainContent,
.tabWrapper,
.tabWrapper .tab {
  height: 100%;
}

.tabWrapper {
  /* hide scrollbar */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Large */
@media (min-width: 992px),
  (min-width: 568px) and (max-width: 991px) and (orientation: portrait) {
  .appWrapper {
    max-width: 1200px;
    margin: 0 auto;
  }

  .mobileContent {
    display: none;
  }

  .mainContent {
    display: flex;
  }

  .firstZone {
    flex: 1;
  }

  .secondZone {
    flex: 1;
  }

  .colorPickerWrapper {
  }

  .colorValuesWrapper {
  }

  .paletteEditorWrapper {
  }

  .paletteLibraryWrapper {
  }
}

/* Landscape Phone */
@media (min-width: 568px) and (max-width: 991px) and (orientation: landscape) {
  .appWrapper {
  }

  .mainContent,
  .mobileTopNav {
    display: none;
  }

  .mobileContent {
    display: flex;
  }

  .mobileLeftNav {
  }

  .mobileRightNav {
  }

  .mobileFirstZone {
    flex: 1;
  }

  .mobileSecondZone {
    flex: 1;
  }

  .tabWrapper {
    max-height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
  }

  .tabWrapper .tab {
    scroll-snap-align: start;
  }

  .colorPickerWrapper {
  }

  .colorValuesWrapper {
  }

  .paletteEditorWrapper {
  }

  .paletteLibraryWrapper {
  }
}

/* Portrait Phone */
@media (max-width: 567px) {
  .appWrapper {
  }

  .mainContent,
  .mobileRightNav,
  .mobileLeftNav {
    display: none;
  }

  .mobileContent {
  }

  .mobileTopNav {
    display: flex;
  }

  .leftMenuButton {
    margin-right: auto;
  }

  .rightMenuButton {
    margin-left: auto;
  }

  .mobileFirstZone {
  }

  .mobileSecondZone {
  }

  .tabWrapper {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
  }

  .tabWrapper .tab {
    min-width: 100vw;
    scroll-snap-align: start;
  }

  .colorPickerWrapper {
  }

  .colorValuesWrapper {
  }

  .paletteEditorWrapper {
  }

  .paletteLibraryWrapper {
  }
}