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)
 
@@ -390,6 +393,15 @@
     &:hover,
     &: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

ratings/templates/ratings/components/rating.html

@@ -51,21 +51,22 @@
       </ul>
     </header>
     <div>{{ rating.text|markdown }}</div>
+
+    {% if rating.ratingreply %}
+    <div class="rating-reply">
+      <header>
+        <ul>
+          <li class="align-items-center me-auto">
+            <a href="{% url "extensions:by-author" user_id=rating.ratingreply.user.pk %}">{{ rating.ratingreply.user }}</a>
+            replied
+          </li>
+          <li>
+            {{ rating.ratingreply.date_created|naturaltime_compact }}
+          </li>
+        </ul>
+      </header>
+    {{ rating.ratingreply.text|markdown }}
+    </div>
+    {% endif %}
   </div>
-  {% if rating.ratingreply %}
-  <div>
-    <header>
-      <ul>
-        <li class="align-items-center me-auto">
-          <a href="{% url "extensions:by-author" user_id=rating.ratingreply.user.pk %}">{{ rating.ratingreply.user }}</a>
-          replied
-        </li>
-        <li>
-          {{ rating.ratingreply.date_created|naturaltime_compact }}
-        </li>
-      </ul>
-    </header>
-  {{ rating.ratingreply.text|markdown }}
-  </div>
-  {% endif %}
 </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 }}