#deployment-bar-container {
  height: 40px;
  margin-bottom: 20px;
}

.deployment-bar {
  float: right;
  position: relative;
  right: 20px;

  &__deploy {
    @extend %floating-panel;
    display: inline-block;
    margin-left: 10px;

    .button--inline-deployment {
      padding-left: 10px;
      padding-right: 10px;
    }
  }

  &__read-only {
    padding: 10px 15px;
    background-color: #fff;
    border-radius: $border-radius;
  }

  .button--inline-neutral {
    padding-left: 10px;
    padding-right: 10px;
    background-color: $canvas-background;

    &:hover {
      background-color: darken($canvas-background, 10%);
    }
  }
}

.display-cookie-notice .deployment-bar {
  margin-bottom: 56px;
}

#deployment-bar-container {
  height: 0;
}

.deployment-bar {
  position: relative;
  height: 0;
  top: -60px;
  float: right;
  right: 20px;

  &__deploy {
    @extend %floating-panel;
    display: inline-block;
    margin-left: 10px;

    .button--inline-deployment {
      padding-left: 10px;
      padding-right: 10px;
    }
  }

  &__read-only {
    padding: 10px 15px;
    background-color: #fff;
    border-radius: $border-radius;
  }

  .button--inline-neutral {
    padding-left: 10px;
    padding-right: 10px;
    background-color: $canvas-background;

    &:hover {
      background-color: darken($canvas-background, 10%);
    }
  }
}

.display-cookie-notice .deployment-bar {
  margin-bottom: 56px;
}

Update styling for the deployment bar so that it doesn't block the canvas but still floats above open terminals.
Update styling for the deployment bar so that it doesn't block the canvas but still floats above open terminals.
