common/static/common/styles/_extension.sass

@@ -383,6 +383,9 @@
     width: 100%
 
 .rating-form
+  .box
+    margin-left: calc(var(--spacer) * 2.5)
+
   select
     color: var(--color-warning)
 
@@ -391,6 +394,15 @@
     &:focus
       color: var(--color-warning)
   
+  textarea
+    min-height: calc(var(--spacer) * 6) 
+
+.rating-reply
+  @extend blockquote
+
+  +margin(3, top)
+  margin-bottom: 0 !important
+
 // TODO: consider adding component boxed nav generic to web-assets, and make variants on top of that
 .nav-pills
   @extend .dropdown-menu

ratings/templates/ratings/components/rating.html

@@ -51,9 +51,9 @@
       </ul>
     </header>
     <div>{{ rating.text|markdown }}</div>
-  </div>
+
     {% if rating.ratingreply %}
-  <div>
+    <div class="rating-reply">
       <header>
         <ul>
           <li class="align-items-center me-auto">
@@ -68,4 +68,5 @@
     {{ rating.ratingreply.text|markdown }}
     </div>
     {% endif %}
+  </div>
 </article>

ratings/templates/ratings/ratingreply_form.html

@@ -10,14 +10,14 @@
   {% include "ratings/components/rating.html" with classes="mb-2" %}
   </div>
 </div>
-<div class="container rating-form">
+<div class="rating-form">
   <form method="post" enctype="multipart/form-data">
   {% csrf_token %}
   {% with form=form|add_form_classes %}
   <div class="row">
     <div class="col-md-8">
       <div class="box p-3">
-        {% include "common/components/field.html" with field=form.text focus=True placeholder="Enter the text here..." %}
+        {% include "common/components/field.html" with field=form.text focus=True placeholder="Enter your reply here..." %}
         {% if form.non_field_errors %}
           <div class="invalid-feedback">
             {{ form.non_field_errors }}