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

.ide {
	display: flex;
	flex-direction: column;
	height: 100%;
	flex-wrap: wrap;
}

.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;
}

.toolbar {
	width: 100%;
}

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