style.css

body {
  margin: 0;
  padding: 0;
}
html,
body,
.wrapper {
  height: 100%;
}
.wrapper {
  display: flex;
  flex-direction: column;
}
#map {
  height: 100%;
}
calcite-stepper {
  padding: 10px;
  box-sizing: border-box;
}
.drawPolygonWrapper {
  position: relative;
  top: -27px;
}
.mapWrapper {
  flex: 1;
  flex-grow: 1;
  position: relative;
}
#codeBlock {
  background-color: white;
  width: 400px;
  right: 20px;
  top: 20px;
  z-index: 400;
  position: absolute;
  padding: 0 10px 10px;
}
#codeBlock .linkWrapper {
  text-align: right;
}

#mainSelect {
  display: none;
}
@media (max-width: 1200px) {
  calcite-stepper {
    display: none;
  }
  #mainSelect {
    display: block;
  }
  #codeBlock {
    bottom: 0px;
    right: 0px;
    left: 0px;
    height: 143px;
    overflow-y: auto;
    top: auto;
    width: auto;
    padding-bottom: 20px;
  }
}