p5.js-web-editor/client/styles/layout/_ide.scss

.ide {
	display: flex;
  flex-direction: column;
  height: 100%;
  flex-wrap: wrap;
  @include themify() {
    color: getThemifyVariable('primary-text-color');
    background-color: getThemifyVariable('background-color');
  }
}

.editor-preview-container {
  width: 100%;
  flex: 1 0 0px;
  display: flex;
  position: relative;
}

.editor-console-container {
  // flex: 1 0 0px;
  // max-width: 45%;
  width: 100%;
  height: 100%;
  position: relative;

  // temporary fix for safari
  min-height: 75vh;
}

.editor-holder {
	height: 100%;
  width: 100%;
  position: absolute;
}

.editor-accessibility {
  @extend %hidden-element;
}

.text-output {
	@extend %hidden-element;
}

.preview-frame {
  height: 100%;
  width: 100%;
  position: absolute;
}


.preview-frame-overlay {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 10;
  display: none;
}

.preview-frame-placeholder {
  width: #{400 / $base-font-size}rem;
  height: #{400 / $base-font-size}rem;
  position: absolute;
  @include themify() {
    background: getThemifyVariable('preview-placeholder-color');
  }
}

.toolbar {
	width: 100%;
}

.sidebar {
  width: 100%;
  height: 100%;
}