Index: arms/html/armsDetailExceptTemplate/assets/css/detail.css
===================================================================
diff -u -r40ac54c92b986c784ae988b4e6338a0bedeea318 -r61e97a23ada085fe0b64aa7d5c84ae3542f2c340
--- arms/html/armsDetailExceptTemplate/assets/css/detail.css	(.../detail.css)	(revision 40ac54c92b986c784ae988b4e6338a0bedeea318)
+++ arms/html/armsDetailExceptTemplate/assets/css/detail.css	(.../detail.css)	(revision 61e97a23ada085fe0b64aa7d5c84ae3542f2c340)
@@ -95,6 +95,46 @@
 }
 
 /* QnA 게시판 관련 CSS */
+@media (max-width: 480px){
+    #contents{
+        max-width:200px;
+    }
+}
+@media (min-width: 480px){
+    #contents{
+        max-width:300px;
+    }
+}
+@media (min-width: 800px){
+    #contents{
+        max-width:500px;
+    }
+}
+
+@media (min-width: 1200px){
+    #contents{
+        max-width:700px;
+    }
+}
+
+@media (min-width: 1400px){
+    #contents{
+        max-width:900px;
+    }
+}
+
+@media (max-width: 480px){
+    #contents{
+        max-width:200px;
+    }
+}
+
+textarea {
+    width: auto;
+    box-sizing: border-box;
+}
+
+
 .footer-chat {
     width: calc(65% - 66px);
     height: 80px;
@@ -593,7 +633,6 @@
 }
 
 .edit-text {
-    width: 100%;
     margin-top: 10px;
 }
 
Index: arms/js/detail.js
===================================================================
diff -u -r0d5a2371b59ac641e448bbfbd7fb7cb740b12dd1 -r61e97a23ada085fe0b64aa7d5c84ae3542f2c340
--- arms/js/detail.js	(.../detail.js)	(revision 0d5a2371b59ac641e448bbfbd7fb7cb740b12dd1)
+++ arms/js/detail.js	(.../detail.js)	(revision 61e97a23ada085fe0b64aa7d5c84ae3542f2c340)
@@ -1296,11 +1296,12 @@
                                 <span href="#" class="user-id">${sender}</span>
                             </div>
                         </div>
-                        <div style="display: flex; position: relative; flex-direction: column; align-items: ${position === 'on-left' ? 'flex-end' : 'flex-start'}; width: fit-content; float:${position === 'on-left' ? 'right' : 'left'};">                                       <div class="chat-message-body ${position}">
+                        <div style="display: flex; position: relative; flex-direction: column; align-items: ${position === 'on-left' ? 'flex-end' : 'flex-start'}; width: fit-content; float:${position === 'on-left' ? 'right' : 'left'};">
+                        <div class="chat-message-body ${position}">
                             <div class="text">
                                 ${contents}
                             </div>
-                            <div class="buttons" style="position: absolute; top: 3px; right:0px;">
+                            <div class="buttons" style="position: absolute; top: 3px; left:0px;">
                              ${buttonsHtml}
                             </div>
 
@@ -1338,14 +1339,18 @@
 function handleEditClick(e){
     var parentDiv = $(this).closest('.chat-message-body');
     var commentText = parentDiv.find('#contents').html();
+    var commentWidth = parentDiv.find('#contents').width();
     commentText = commentText.replace(/<br>/g, "\n");
 
     parentDiv.find('.edit-text').val(commentText);
+
     parentDiv.find('#contents').hide();
     parentDiv.find('.dropdown-button').hide();
     parentDiv.find('.dropdown-content').addClass('hide');
     parentDiv.find('.edit-comment').show();
 
+    parentDiv.find('.edit-text').css('width', commentWidth + 'px')
+
     $('.edit-text').on('input', function () {
         this.style.height = 'auto';
         this.style.height = (this.scrollHeight) + 'px';