changes.md

/ember/node_modules/ember-modal-dialog/addon/components/positioned-container.js

  alignCenter: function() {
    //const elementWidth = this.$().outerWidth();
    //const elementHeight = this.$().outerHeight();

    // this.$().css('left', '50%')
    //   .css('top', '50%')
    //   .css('margin-left', elementWidth * -0.5)
    //   .css('margin-top', elementHeight * -0.5);

    this.$().css('top', '50%')
      .css('max-width', '60$')
      .css('position', 'relative')
      .css('margin', '0 auto')
      .css('word-break', 'break-all')
      .css('transform', 'translateY(-50%)');
  },

/ember/app/styles/extra.scss

  /* style for login modal */
  .login-box-margin {
    margin:0px;
  }
  .login-title {
    text-align: center;
    font-size: 30px;
    font-weight: 400;
    letter-spacing: .05em;
  }
  .login-modal {
    max-width: 40%;
  }

  /* style for challenges modal */
  .challenge-style-modal-container {
    max-height: 80%; 
    overflow: scroll; 
  }

/ember/app/templates/components/login-modal.hbs

{{#modal-dialog translucentOverlay=true containerClassNames='login-modal'}}