<commit_before>/**
 * Thread
 */

#messages-thread {
  position: fixed;
  bottom: 250px;
  width: 100%;
  top: @navbar-height;
  padding-top: @grid-gutter-width;
  padding-right: (@grid-gutter-width / 2); // Leave some space for the scrollbar
  overflow: auto;
  .content-empty {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
}


// Single message in the thread
.message {
  clear: both;
  margin-left: -(@grid-gutter-width / 2);
  @media (min-width: @screen-sm-min) {
    .panel {
      .panel-triangle-right();
    }
  }
  // Message came via SocketIO
  /*
  &.message-pushed {
    .panel {
      background: lighten(@brand-primary, 50%);
    }
  }
  */
  &.message-unread {
    .panel {
      border-left-color: @brand-primary;
      border-left-width: 2px;
      // Pause for 1s before making 2s linear animation for any CSS change
      // @link http://www.w3schools.com/css/css3_transitions.asp
      .transition("all 2s linear 5s");
    }
  }
  .divider {
    .text-muted;
    font-size: @font-size-small;
    margin: 10px 0;
    &.divider-first {
        margin-top: 0;
    }
    &.divider-last {
        margin-bottom: 0;
    }
  }
  .message-author {
    .avatar {
      margin: 25px auto @padding-small-vertical auto;
    }
    .text-center;
  }
  .message-meta {
    display: inline-block;
    font-size: @font-size-small;
    padding-right: 3px;
    &,
    a {
      .text-muted();
    }
  }
  .message-meta {
    display: block;
    text-align: right;
    clear: both;
    overflow: hidden;
    .link-badge {
      margin-bottom: 0;
    }
    /*
    .message-request {
      clear: both;
      overflow: hidden;
      margin: @padding-small-vertical 0 0 0;
      background: @gray-lighter;
      padding: @padding-small-vertical @padding-small-horizontal;
      font-size: @font-size-small;
      line-height: @font-size-small;
      @media (max-width: @screen-xs-max) {
        line-height: @line-height-base;
      }
      .message-request-status {
        float: left;
        font-weight: bold;
        @media (max-width: @screen-xs-max) {
          font-size: @font-size-base;
        }
      }
      .message-request-meta {
        float: right;
        text-align: right;
        &.visible-sm {
          font-weight: bold;
        }
        @media (max-width: @screen-xs-max) {
          display: block;
          clear: both;
          float: none;
          text-align: left;
        }
      }
    }
    */
  }
}

// Reply box
#message-reply {
  position: fixed;
  bottom: @padding-base-horizontal;
  width: 800px;

  // No color glow on hover with this Medium editor
  .angular-medium-editor {
    &:hover {
      background: transparent;
    }
  }
  .message-reply-title {
    margin: 0;
    float: left;
    font-size: 13px;
    line-height: 13px;
  }
  .panel {
    margin-bottom: @padding-xs-horizontal;
    .panel-body {
      padding: @padding-xs-horizontal;
      background: @gray-lighter;
    }
    #message-reply-content {
      .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
      font-size: @font-size-base;
      line-height: @line-height-base;
      padding: @padding-base-vertical @padding-base-horizontal;
      border: 0;
      border-top: 1px solid transparent;
      padding-top: 16px;
      margin-bottom: 16px;
      min-height: 53px;
      max-height: 250px;
      overflow: auto;
      resize: none;
      &:focus {
        outline: none;
        .box-shadow(none);
        border-color: @brand-primary;
      }
      &:after {
        top: 16px;
        left: 12px;
        @media (max-width: @screen-xs-max) {
          top: 6px;
        }
      }
      p {
        margin: 0;
      }
      @media (max-width: @screen-xs-max) {
        padding-top: 8px;
        margin-bottom: 8px;
        min-height: 25px;
        border-radius: 0;
      }
    }
    @media (max-width: @screen-xs-max) {
      margin-bottom: -1px;
      margin-left: -15px;
      margin-right: 0px;
    }
  }
  .message-reply-btn {
    float: right;
    // Fix button to the bottom of the screen so that it
    // won't escape upwards when textarea next to it grows
    @media (max-width: @screen-xs-max) {
      height: 45px;
      width: 45px;
      bottom: 0;
      right: 0;
      position: fixed;
      border-radius: 0;
    }
  }
  @media (max-width: @screen-xs-max) {
    bottom: 0;
  }
}
<commit_msg>Fix #128 message textarea jumping off-screen on mobile<commit_after>/**
 * Thread
 */

#messages-thread {
  position: fixed;
  bottom: 250px;
  width: 100%;
  top: @navbar-height;
  padding-top: @grid-gutter-width;
  padding-right: (@grid-gutter-width / 2); // Leave some space for the scrollbar
  overflow: auto;
  .content-empty {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
}


// Single message in the thread
.message {
  clear: both;
  margin-left: -(@grid-gutter-width / 2);
  @media (min-width: @screen-sm-min) {
    .panel {
      .panel-triangle-right();
    }
  }
  // Message came via SocketIO
  /*
  &.message-pushed {
    .panel {
      background: lighten(@brand-primary, 50%);
    }
  }
  */
  &.message-unread {
    .panel {
      border-left-color: @brand-primary;
      border-left-width: 2px;
      // Pause for 1s before making 2s linear animation for any CSS change
      // @link http://www.w3schools.com/css/css3_transitions.asp
      .transition("all 2s linear 5s");
    }
  }
  .divider {
    .text-muted;
    font-size: @font-size-small;
    margin: 10px 0;
    &.divider-first {
        margin-top: 0;
    }
    &.divider-last {
        margin-bottom: 0;
    }
  }
  .message-author {
    .avatar {
      margin: 25px auto @padding-small-vertical auto;
    }
    .text-center;
  }
  .message-meta {
    display: inline-block;
    font-size: @font-size-small;
    padding-right: 3px;
    &,
    a {
      .text-muted();
    }
  }
  .message-meta {
    display: block;
    text-align: right;
    clear: both;
    overflow: hidden;
    .link-badge {
      margin-bottom: 0;
    }
    /*
    .message-request {
      clear: both;
      overflow: hidden;
      margin: @padding-small-vertical 0 0 0;
      background: @gray-lighter;
      padding: @padding-small-vertical @padding-small-horizontal;
      font-size: @font-size-small;
      line-height: @font-size-small;
      @media (max-width: @screen-xs-max) {
        line-height: @line-height-base;
      }
      .message-request-status {
        float: left;
        font-weight: bold;
        @media (max-width: @screen-xs-max) {
          font-size: @font-size-base;
        }
      }
      .message-request-meta {
        float: right;
        text-align: right;
        &.visible-sm {
          font-weight: bold;
        }
        @media (max-width: @screen-xs-max) {
          display: block;
          clear: both;
          float: none;
          text-align: left;
        }
      }
    }
    */
  }
}

// Reply box
#message-reply {
  position: fixed;
  bottom: @padding-base-horizontal;
  width: 800px;

  // No color glow on hover with this Medium editor
  .angular-medium-editor {
    &:hover {
      background: transparent;
    }
  }
  .message-reply-title {
    margin: 0;
    float: left;
    font-size: 13px;
    line-height: 13px;
  }
  .panel {
    margin-bottom: @padding-xs-horizontal;
    .panel-body {
      padding: @padding-xs-horizontal;
      background: @gray-lighter;
    }
    #message-reply-content {
      .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
      font-size: @font-size-base;
      line-height: @line-height-base;
      padding: @padding-base-vertical @padding-base-horizontal;
      border: 0;
      border-top: 1px solid transparent;
      padding-top: 16px;
      margin-bottom: 16px;
      min-height: 53px;
      max-height: 250px;
      overflow: auto;
      resize: none;
      &:focus {
        outline: none;
        .box-shadow(none);
        border-color: @brand-primary;
      }
      &:after {
        top: 16px;
        left: 12px;
        @media (max-width: @screen-xs-max) {
          top: 6px;
        }
      }
      p {
        margin: 0;
      }
      @media (max-width: @screen-xs-max) {
        padding-top: 8px;
        margin-bottom: 8px;
        min-height: 25px;
        border-radius: 0;
        max-height: 60px;
      }
    }
    @media (max-width: @screen-xs-max) {
      margin-bottom: -1px;
      margin-left: -15px;
      margin-right: 0px;
    }
  }
  .message-reply-btn {
    float: right;
    // Fix button to the bottom of the screen so that it
    // won't escape upwards when textarea next to it grows
    @media (max-width: @screen-xs-max) {
      height: 45px;
      width: 45px;
      bottom: 0;
      right: 0;
      position: fixed;
      border-radius: 0;
    }
  }
  @media (max-width: @screen-xs-max) {
    bottom: 0;
  }
}

{'fraction_non_alphanumeric': 0.14039660056657224, 'fraction_numerical': 0.018243626062322948, 'mean_word_length': 1.8054672600127146, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3819339', 'n_tokens_mistral': 3223, 'n_tokens_neox': 3056, 'n_words': 669}