comments/templates/comments/components/comment_input.html

@@ -5,8 +5,8 @@
     {% include 'users/components/avatar.html' with user=request.user %}
   </div>
   <div class="col ps-0">
-    {# TODO: migrate to form tags? #}
-    <div class="comment-input-div form-control" contenteditable="true"></div>
+    {# TODO: migrate to form tags #}
+    <div class="comment-input-div form-control js-comment-input-div-helper" contenteditable="true"></div>
   </div>
   <div class="col comment-send d-flex flex-grow-0 lh-base ps-0">
     <button class="btn btn-input btn-primary">

common/static/common/scripts/helpers.js

@@ -0,0 +1,24 @@
+document.addEventListener('DOMContentLoaded', function() {
+  // TODO: remove function setCommentInputDivMaxWidth after forms have been migrated to native forms tags
+  function setCommentInputDivMaxWidth() {
+    setTimeout(function() {
+      const commentInputDivHelper = document.querySelectorAll('.js-comment-input-div-helper');
+
+      commentInputDivHelper.forEach(function(item) {
+        // Get item width within flex container
+        let itemWidth = item.offsetWidth;
+
+        // Set item max-width for multi-line comments
+        item.style.maxWidth = itemWidth + 'px';
+      });
+    }, 2000)
+  }
+
+  function init() {
+    setCommentInputDivMaxWidth();
+
+    window.addEventListener('resize', function() {
+      setCommentInputDivMaxWidth();
+    });
+  }
+});

common/static/common/styles/studio/_comments.sass

@@ -42,7 +42,7 @@
   padding: var(--spacer-1)
 
 .comment-input
-  align-items: center
+  align-items: start
   display: flex
   flex-direction: row
   +margin(2, bottom)