@import "../../mixins";

/** A React component holding the commit message entry */
#commit-message {
  border-top: 1px solid var(--box-border-color);
  flex-direction: column;
  flex-shrink: 0;
  margin-top: auto;

  display: flex;
  background-color: var(--box-alt-background-color);
  padding: var(--spacing);

  .summary {
    display: flex;
    flex-direction: row;

    .summary-field {
      flex: 1;
      margin-bottom: var(--spacing);

      input { width: 100%; }
    }

    .avatar {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      border: var(--base-border);
      border-radius: var(--border-radius);
      margin-right: var(--spacing-half);
    }
  }

  .commit-button {
    margin-top: var(--spacing);

    /* Due to some weirdo bug in Chrome that affects Windows
     * and possible other platforms we can't change the opacity
     * for disabled buttons if the button also has a
     * overflow: hidden property set. The workaround is to put
     * the contents of the button in a block element and put
     * ellipsis on that instead. See commit 67fad24ed
     */
    div { @include ellipsis }
  }
}

@import "../../mixins";

/** A React component holding the commit message entry */
#commit-message {
  border-top: 1px solid var(--box-border-color);
  flex-direction: column;
  flex-shrink: 0;
  margin-top: auto;

  display: flex;
  background-color: var(--box-alt-background-color);
  padding: var(--spacing);

  .summary {
    display: flex;
    flex-direction: row;

    .summary-field {
      flex: 1;
      margin-bottom: var(--spacing);

      input { width: 100%; }
    }

    .avatar {
      flex-shrink: 0;
      width: var(--text-field-height);
      height:var(--text-field-height);
      border: var(--base-border);
      border-radius: var(--border-radius);
      margin-right: var(--spacing-half);
    }
  }

  .commit-button {
    margin-top: var(--spacing);

    /* Due to some weirdo bug in Chrome that affects Windows
     * and possible other platforms we can't change the opacity
     * for disabled buttons if the button also has a
     * overflow: hidden property set. The workaround is to put
     * the contents of the button in a block element and put
     * ellipsis on that instead. See commit 67fad24ed
     */
    div { @include ellipsis }
  }
}

Update avatar height to match text field height
Update avatar height to match text field height
