index.css

body, html { 
  margin: 0; height: 100%;
}

#toast-container {
  position: absolute; 
  top: 20px; 
  right: 20px;
  z-index: 1050;
}
.toast {
  min-width: 250px;
}
.toast-icon {
  width: 20px; 
  height: 20px;
}

#project-mask {
  position: absolute;
  width: 100%;
  height: 100%;
}
#project-panel {
  position: absolute;
  left: 40px;
  right: 40px;
  min-width: 720px;
  min-height: 400px;
  top: 50%;
  transform: translate(0, -50%);
}
#mask-container {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1060;
}
#mask-container .waiting-spinner {
  position: absolute;
  left: calc(50% - 64px);
  top: calc(50% - 64px);
}

#container { 
  height: 100%;
  width: 100%;
  display: flex;
  min-width: 800px;
  min-height: 600px;
}
#sider-menu { 
  min-width: 250px;
  width: 350px; 
  height: 100%;
  background: #202020;
  padding: 20px;
}
#sider-menu .menu-panel {
  margin-bottom: 20px;
}
#sider-menu .title {
  color: white;
  font-weight: bold;
}
#sider-menu .divider {
  height: 1px;
  background: white;
  width: 100%;
  margin: 10px 0;
}
#canvas-container { 
  overflow: hidden;
  background: #232323;
}
#canvas-container, #canvas { 
  height: 100%;
}
#sider-menu .render-info-line {
  margin-left: 10px;
  margin-right: 10px;
}
#sider-menu .render-info-line p {
  display: inline-block;
  color: white;
}
/* #sider-menu .render-info-line .render-info-key {
} */
#sider-menu .render-info-line .render-info-value {
  float: right;
}

#project-panel {
  padding: 32px;
  max-height: 80%;
  min-height: 60%;
}
#project-panel .project-container {
  overflow: auto;
  position: absolute;
  height: calc(100% - 64px - 54px);
  width: calc(100% - 64px);
  background: #ccc;
  border-radius: 10px;
  padding: 16px;
}
#project-panel .project-container .project-item {
  background: white;
  border-radius: 10px;
  width: 180px;
  height: 250px;
  padding: 10px;
  text-align: center;
  margin-right: 16px;
  margin-bottom: 16px;
  display: inline-block;
}
#project-panel .project-container .project-item img {
  width: 120px;
  height: 120px;
  margin-bottom: 10px;
}
#project-panel .project-container .project-item .project-info {
  width: 160px;
  min-width: 160px;
  max-width: 160px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 5px;
}
#project-panel .project-panel-header {
  margin-bottom: 16px;
}