#alchemy_preview_window {
  position: absolute;
  left: $main-menu-width;
  top: 75px;
  width: calc(100vw - #{$main-menu-width - $default-border-width});
  height: calc(100vh - #{$top-menu-height});
  border: 0 none;
  background: #fff;
  border-right: $default-border;
  transition: $transition-duration ease-in-out;

  .collapsed-menu & {
    left: $collapsed-main-menu-width;
    width: calc(100vw - #{$collapsed-main-menu-width - $default-border-width});
  }

  .collapsed-menu.elements-window-visible & {
    width: calc(100vw - #{$collapsed-main-menu-width - $default-border-width} - #{$elements-window-width});
  }
}

#alchemy_preview_window {
  position: absolute;
  left: $main-menu-width;
  top: 75px;
  width: calc(100vw - #{$main-menu-width - $default-border-width});
  height: calc(100vh - #{$top-menu-height});
  border: 0 none;
  background: #fff;
  border-right: $default-border;
  transition: $transition-duration ease-in-out;

  .collapsed-menu & {
    left: $collapsed-main-menu-width;
    width: calc(100vw - #{$collapsed-main-menu-width - $default-border-width});
  }

  .collapsed-menu.elements-window-visible & {
    width: calc(100vw - #{$collapsed-main-menu-width - $default-border-width} - #{$elements-window-width});

    @media screen and (min-width: $large-screen-break-point) {
      max-width: calc(100vw - #{$collapsed-main-menu-width - $default-border-width} - #{$elements-window-min-width});
    }
  }
}

Set a max-width to preview frame
Set a max-width to preview frame

The preview frame needs to have a max width that respects the min width of the elements window id that is visible. Otherwise the preview frame overlaps the elements window on medium screens.
