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

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

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

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

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

.preview-frame {
	flex: 1 0 0px;
  min-height: 100%;
}

.toolbar {
	width: 100%;
}

.sidebar {
  width: #{180 / $base-font-size}rem;
  &.sidebar--contracted {
  	width: #{20 / $base-font-size}rem;
  }
}