p5.js-web-editor/client/styles/components/_collection.scss

.collection-container {
  padding: #{24 / $base-font-size}rem #{66 / $base-font-size}rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.collection-metadata {
  width: #{1012 / $base-font-size}rem;
  margin: 0 auto;
  margin-bottom: #{24 / $base-font-size}rem;
}

.collection-metadata__columns {
  display: flex;
}

.collection-metadata__column--left,
.collection-metadata__column--right {
  flex: 1;
}

.collection-metadata__column--right {
  align-self: flex-end;

  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.collection-metadata__column--right > * {
  margin-left: #{10 / $base-font-size}rem;
}

.collection-metadata__name {
  // padding: #{8 / $base-font-size}rem 0;
}

.collection-metadata__name .editable-input__label span {
  padding: 0.83333rem 0;

  @include themify() {
    color: getThemifyVariable('primary-text-color');
  }
}

.collection-metadata__name,
.collection-metadata__name .editable-input__input {
  font-size: 1.75rem;
  font-weight: bold;
}

.collection-metadata__user {
  padding-top: #{8 / $base-font-size}rem;
  font-size: 14px;
}

.collection-metadata--is-owner .collection-metadata__user {
  padding-left: #{8 / $base-font-size}rem;
}

.collection-metadata__description {
  margin-top: #{8 / $base-font-size}rem;
  text-align: left;
  font-size: 14px;
}

.collection-metadata__description .editable-input__label {
  text-align: left;

  @include themify() {
    color: getThemifyVariable('primary-text-color');
  }
}

.collection-metadata__description .editable-input__input {
  width: 100%;
}

.collection-add-sketch {
  min-width: #{600 / $base-font-size}rem;
  overflow: scroll;
}

.collection-share {
  text-align: right;
}

.collection-share__button {
  @extend %button;
}

.collection-share__label {
  display: block;
  text-align: left;
}

.collection-share .copyable-input {
  padding-bottom: 0;
}

.collection-metadata__add-button {
  @extend %primary-button;
  flex-grow: 0;
}

.collection-table-wrapper {
  width: #{1012 / $base-font-size}rem;
  margin: 0 auto;
  flex: 1;
  @include themify() {
    border: 1px solid getThemifyVariable('modal-border-color');
  }
}

[data-has-items=false] .collection-table-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.collection-empty-message {
  text-align: center;
  font-size: #{16 / $base-font-size}rem;
}