cyb/src/pages/Settings/Layout/Layout.module.scss

@use '../../../layouts/variables.module.scss' as *;

$size-columns: 200px;
$size-columns-collapsed: 48px;

.wrapper {
  display: grid;
  grid-template-columns: $size-columns minmax($size-columns, 1fr);
  grid-template-rows: 1fr;
  justify-content: center;

  height: 70vh;
  max-height: calc(100vh - $reservedTopHeight - $actionBarHeight);

  // sidebar: remove right border so divider = single 2px (content left border)
  > :first-child {
    > div {
      overflow-x: hidden;
      border-right: none !important;
      height: 100%;

      &::after {
        display: none !important;
      }
    }
  }

  // content panel (Display.wrapper = flex column)
  > :nth-child(2) {
    position: relative;
    overflow: hidden;
    min-width: 0;

    // Display.inner: override height:100% from Display.module.scss
    // so it fills remaining space after header and scrolls internally
    > :last-child {
      height: auto !important;
      max-height: none !important;
      flex: 1;
      min-height: 0;
      overflow-y: auto;

      // content wraps instead of overflowing horizontally
      > * {
        max-width: 100%;
        overflow-wrap: break-word;
      }
    }
  }

  @media (max-width: 540px) {
    grid-template-columns: $size-columns-collapsed 1fr;
    position: relative;
    margin-top: 20px;
    height: calc(100vh - $reservedTopHeight - $actionBarHeight - 20px);
    max-height: calc(100vh - $reservedTopHeight - $actionBarHeight - 20px);

    > :first-child {
      z-index: 10;
    }
  }
}