Fix moderation dashboard CSS formatting

- Update category and status select fields with consistent styling
- Add proper dark mode support for form elements
- Improve form field spacing and alignment
- Standardize input field styling across the dashboard

templates/moderation/partials/submission_list.html

@@ -1,55 +1,91 @@
+{% load moderation_tags %}
 {% for submission in submissions %}
 <div class="p-6 bg-white border rounded-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50"
      id="submission-{{ submission.id }}"
-     x-data="{ showSuccess: false }"
+     x-data="{ 
+        showSuccess: false, 
+        isEditing: false,
+        status: '{{ submission.changes.status|default:"" }}',
+        category: '{{ submission.changes.category|default:"" }}',
+        showCoasterFields: {% if submission.changes.category == 'RC' %}true{% else %}false{% endif %},
+        init() {
+            this.$watch('status', value => {
+                this.status = value;
+            });
+            this.$watch('category', value => {
+                this.category = value;
+                this.showCoasterFields = value === 'RC';
+            });
+        }
+     }"
      @htmx:afterOnLoad="showSuccess = true; setTimeout(() => showSuccess = false, 3000)">
-    <div class="mb-4 submission-header">
+    
-        <div>
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-3">
+        <!-- Left Column: Header & Status -->
+        <div class="md:col-span-1">
+            <div class="submission-header">
                 <h3 class="flex items-center gap-3 text-lg font-semibold text-gray-900 dark:text-gray-300">
                     <span class="status-badge 
-                    {% if submission.status == 'NEW' %}status-pending
+                        {% if submission.status == 'PENDING' %}status-pending
                         {% elif submission.status == 'APPROVED' %}status-approved
                         {% elif submission.status == 'REJECTED' %}status-rejected
                         {% elif submission.status == 'ESCALATED' %}status-escalated{% endif %}">
-                    <i class="mr-1.5 fas fa-{% if submission.status == 'NEW' %}clock
+                        <i class="mr-1.5 fas fa-{% if submission.status == 'PENDING' %}clock
                             {% elif submission.status == 'APPROVED' %}check
                             {% elif submission.status == 'REJECTED' %}times
                             {% elif submission.status == 'ESCALATED' %}exclamation{% endif %}"></i>
                         {{ submission.get_status_display }}
                     </span>
+                </h3>
+                <div class="mt-3 text-gray-600 dark:text-gray-400">
+                    <div class="flex items-center mb-2">
+                        <i class="w-5 mr-2 fas fa-file-alt"></i>
                         {{ submission.get_content_type_display }} - 
                         {% if submission.submission_type == 'CREATE' %}New{% else %}Edit{% endif %}
-            </h3>
+                    </div>
-            <div class="mt-2 text-gray-600 dark:text-gray-400">
+                    <div class="flex items-center mb-2">
-                <span class="inline-flex items-center">
+                        <i class="w-5 mr-2 fas fa-user"></i>
-                    <i class="mr-1.5 fas fa-user"></i>
                         {{ submission.user.username }}
-                </span>
+                    </div>
-                <span class="mx-2.5">•</span>
+                    <div class="flex items-center mb-2">
-                <span class="inline-flex items-center">
+                        <i class="w-5 mr-2 fas fa-clock"></i>
-                    <i class="mr-1.5 fas fa-clock"></i>
                         {{ submission.created_at|date:"M d, Y H:i" }}
-                </span>
+                    </div>
                     {% if submission.handled_by %}
-                <span class="mx-2.5">•</span>
+                    <div class="flex items-center">
-                <span class="inline-flex items-center">
+                        <i class="w-5 mr-2 fas fa-user-shield"></i>
-                    <i class="mr-1.5 fas fa-user-shield"></i>
+                        {{ submission.handled_by.username }}
-                    Handled by {{ submission.handled_by.username }}
+                    </div>
-                </span>
                     {% endif %}
                 </div>
             </div>
         </div>
 
+        <!-- Middle Column: Content Details -->
+        <div class="md:col-span-2">
+            {% if submission.content_object %}
+            <div class="p-4 mb-4 bg-gray-100 border rounded-lg dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50">
+                <div class="text-sm font-medium text-gray-900 dark:text-gray-300">Current Object:</div>
+                <div class="mt-1.5 text-gray-600 dark:text-gray-400">
+                    {{ submission.content_object }}
+                    {% if submission.content_type.model == 'park' or submission.content_type.model == 'company' or submission.content_type.model == 'designer' %}
+                        <div class="mt-1 text-sm">
+                            {{ submission.content_object.address }}
+                        </div>
+                    {% endif %}
+                </div>
+            </div>
+            {% endif %}
+
             {% if submission.reason %}
-    <div class="p-4 mt-3 bg-gray-100 border rounded-lg dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50">
+            <div class="p-4 mb-4 bg-gray-100 border rounded-lg dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50">
                 <div class="text-sm font-medium text-gray-900 dark:text-gray-300">Reason:</div>
                 <div class="mt-1.5 text-gray-600 dark:text-gray-400">{{ submission.reason }}</div>
             </div>
             {% endif %}
 
             {% if submission.source %}
-    <div class="p-4 mt-3 bg-gray-100 border rounded-lg dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50">
+            <div class="p-4 mb-4 bg-gray-100 border rounded-lg dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50">
                 <div class="text-sm font-medium text-gray-900 dark:text-gray-300">Source:</div>
                 <div class="mt-1.5">
                     <a href="{{ submission.source }}" 
@@ -62,19 +98,274 @@
             </div>
             {% endif %}
 
-    <div class="mt-4 space-y-3">
+            <!-- View Mode -->
+            <div x-show="!isEditing"
+                 class="grid grid-cols-1 gap-3 md:grid-cols-2">
                 {% for field, value in submission.changes.items %}
+                {% if field != 'model_name' %}
                 <div class="p-4 bg-gray-100 border rounded-lg dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50">
                     <div class="text-sm font-medium text-gray-900 dark:text-gray-300">
                         {{ field|title }}:
                     </div>
                     <div class="mt-1.5 text-gray-600 dark:text-gray-400">
+                        {% if field == 'opening_date' or field == 'closing_date' or field == 'status_since' %}
+                            {{ value|date:"Y-m-d" }}
+                        {% elif field == 'size_acres' %}
+                            {{ value }} acres
+                        {% elif field == 'website' %}
+                            <a href="{{ value }}" target="_blank" class="text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">
                                 {{ value }}
+                            </a>
+                        {% elif field == 'park' %}
+                            {% with park_name=value|get_object_name:'parks.Park' %}
+                                {{ park_name }}
+                            {% endwith %}
+                        {% elif field == 'designer' %}
+                            {% with designer_name=value|get_object_name:'designers.Designer' %}
+                                {{ designer_name|default:'None' }}
+                            {% endwith %}
+                        {% elif field == 'manufacturer' %}
+                            {% with manufacturer_name=value|get_object_name:'companies.Manufacturer' %}
+                                {{ manufacturer_name|default:'None' }}
+                            {% endwith %}
+                        {% elif field == 'ride_model' %}
+                            {% with model_name=value|get_object_name:'rides.RideModel' %}
+                                {{ model_name|default:'None' }}
+                            {% endwith %}
+                        {% elif field == 'park_area' %}
+                            {% with park_id=submission.changes.park %}
+                                {{ value|get_park_area_name:park_id|default:'None' }}
+                            {% endwith %}
+                        {% elif field == 'category' %}
+                            {{ value|get_category_display }}
+                        {% elif field == 'stats' %}
+                            <div class="space-y-2">
+                                {% if value.height_ft %}<div>Height: {{ value.height_ft }} ft</div>{% endif %}
+                                {% if value.length_ft %}<div>Length: {{ value.length_ft }} ft</div>{% endif %}
+                                {% if value.speed_mph %}<div>Speed: {{ value.speed_mph }} mph</div>{% endif %}
+                                {% if value.inversions %}<div>Inversions: {{ value.inversions }}</div>{% endif %}
+                                {% if value.launch_type %}<div>Launch Type: {{ value.launch_type }}</div>{% endif %}
+                                {% if value.track_material %}<div>Track Material: {{ value.track_material }}</div>{% endif %}
+                                {% if value.roller_coaster_type %}<div>Type: {{ value.roller_coaster_type }}</div>{% endif %}
+                                {% if value.trains_count %}<div>Number of Trains: {{ value.trains_count }}</div>{% endif %}
+                                {% if value.cars_per_train %}<div>Cars per Train: {{ value.cars_per_train }}</div>{% endif %}
+                                {% if value.seats_per_car %}<div>Seats per Car: {{ value.seats_per_car }}</div>{% endif %}
+                            </div>
+                        {% else %}
+                            {{ value }}
+                        {% endif %}
                     </div>
                 </div>
+                {% endif %}
                 {% endfor %}
             </div>
 
+            <!-- Edit Mode -->
+            <form x-show="isEditing"
+                  x-cloak
+                  hx-post="{% url 'moderation:edit_submission' submission.id %}"
+                  hx-target="#submission-{{ submission.id }}"
+                  class="grid grid-cols-1 gap-3 md:grid-cols-2">
+                {% for field, value in submission.changes.items %}
+                {% if field != 'model_name' %}
+                <div class="p-4 bg-gray-100 border rounded-lg dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50"
+                     {% if field == 'post_closing_status' %}x-show="status === 'CLOSING'"{% endif %}
+                     {% if field == 'closing_date' %}x-show="['CLOSING', 'SBNO', 'CLOSED_PERM', 'DEMOLISHED', 'RELOCATED'].includes(status)"{% endif %}>
+                    <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
+                        {{ field|title }}:
+                    </label>
+
+                    {% if field == 'category' %}
+                        <select name="{{ field }}"
+                                x-model="category"
+                                class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500">
+                            {% for choice in submission.content_object.CATEGORY_CHOICES %}
+                            <option value="{{ choice.0 }}" {% if choice.0 == value %}selected{% endif %}>{{ choice.1 }}</option>
+                            {% endfor %}
+                        </select>
+                        <div id="coaster-fields-{{ submission.id }}" 
+                             class="mt-4"
+                             x-show="showCoasterFields"
+                             x-cloak>
+                            {% if value == 'RC' %}
+                                {% include 'moderation/partials/coaster_fields.html' with stats=submission.changes.stats %}
+                            {% endif %}
+                        </div>
+                    {% elif field == 'status' %}
+                        <select name="{{ field }}"
+                                x-model="status"
+                                class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500">
+                            {% for choice in submission.content_object.STATUS_CHOICES %}
+                            <option value="{{ choice.0 }}" {% if choice.0 == value %}selected{% endif %}>{{ choice.1 }}</option>
+                            {% endfor %}
+                        </select>
+                    {% elif field == 'post_closing_status' %}
+                        <select name="{{ field }}"
+                                class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500">
+                            {% for choice in submission.content_object.POST_CLOSING_STATUS_CHOICES %}
+                            <option value="{{ choice.0 }}" {% if choice.0 == value %}selected{% endif %}>{{ choice.1 }}</option>
+                            {% endfor %}
+                        </select>
+                    {% elif field == 'opening_date' or field == 'closing_date' or field == 'status_since' %}
+                        <input type="date"
+                               name="{{ field }}"
+                               value="{{ value|date:'Y-m-d' }}"
+                               class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
+                               {% if field == 'closing_date' %}
+                               :required="status === 'CLOSING'"
+                               {% endif %}>
+                    {% else %}
+                        <!-- Keep existing field implementations -->
+                        {% if field == 'park' %}
+                            <div class="relative space-y-2">
+                                <input type="text"
+                                       id="park-search-{{ submission.id }}"
+                                       placeholder="Search for a park..."
+                                       class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
+                                       hx-get="{% url 'moderation:search_parks' %}"
+                                       hx-trigger="click, input delay:200ms"
+                                       hx-target="#park-search-results-{{ submission.id }}"
+                                       hx-vals='{"submission_id": "{{ submission.id }}"}'
+                                       name="q"
+                                       autocomplete="off"
+                                       {% with park_name=value|get_object_name:'parks.Park' %}
+                                       value="{{ park_name }}"
+                                       {% endwith %}>
+                                <div id="park-search-results-{{ submission.id }}" class="absolute z-50 w-full"></div>
+                                <input type="hidden" 
+                                       id="park-input-{{ submission.id }}"
+                                       name="{{ field }}" 
+                                       value="{{ value }}"
+                                       hx-trigger="change"
+                                       hx-get="/parks/areas/"
+                                       hx-target="#park-area-select-{{ submission.id }}">
+                            </div>
+                        {% elif field == 'manufacturer' %}
+                            <div class="relative space-y-2">
+                                <input type="text"
+                                       id="manufacturer-search-{{ submission.id }}"
+                                       placeholder="Search for a manufacturer..."
+                                       class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
+                                       hx-get="{% url 'moderation:search_manufacturers' %}"
+                                       hx-trigger="click, input delay:200ms"
+                                       hx-target="#manufacturer-search-results-{{ submission.id }}"
+                                       hx-vals='{"submission_id": "{{ submission.id }}"}'
+                                       name="q"
+                                       autocomplete="off"
+                                       {% with manufacturer_name=value|get_object_name:'companies.Manufacturer' %}
+                                       value="{{ manufacturer_name }}"
+                                       {% endwith %}>
+                                <div id="manufacturer-search-results-{{ submission.id }}" class="absolute z-50 w-full"></div>
+                                <input type="hidden" 
+                                       id="manufacturer-input-{{ submission.id }}"
+                                       name="{{ field }}" 
+                                       value="{{ value }}">
+                            </div>
+                        {% elif field == 'designer' %}
+                            <div class="relative space-y-2">
+                                <input type="text"
+                                       id="designer-search-{{ submission.id }}"
+                                       placeholder="Search for a designer..."
+                                       class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
+                                       hx-get="{% url 'moderation:search_designers' %}"
+                                       hx-trigger="click, input delay:200ms"
+                                       hx-target="#designer-search-results-{{ submission.id }}"
+                                       hx-vals='{"submission_id": "{{ submission.id }}"}'
+                                       name="q"
+                                       autocomplete="off"
+                                       {% with designer_name=value|get_object_name:'designers.Designer' %}
+                                       value="{{ designer_name }}"
+                                       {% endwith %}>
+                                <div id="designer-search-results-{{ submission.id }}" class="absolute z-50 w-full"></div>
+                                <input type="hidden" 
+                                       id="designer-input-{{ submission.id }}"
+                                       name="{{ field }}" 
+                                       value="{{ value }}">
+                            </div>
+                        {% elif field == 'ride_model' %}
+                            <div class="relative space-y-2">
+                                <input type="text"
+                                       id="ride-model-search-{{ submission.id }}"
+                                       placeholder="Search for a ride model..."
+                                       class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
+                                       hx-get="{% url 'moderation:search_ride_models' %}"
+                                       hx-trigger="click, input delay:200ms"
+                                       hx-target="#ride-model-search-results-{{ submission.id }}"
+                                       hx-vals='{"submission_id": "{{ submission.id }}"}'
+                                       hx-include="[name='manufacturer']"
+                                       name="q"
+                                       autocomplete="off"
+                                       {% with model_name=value|get_object_name:'rides.RideModel' %}
+                                       value="{{ model_name }}"
+                                       {% endwith %}>
+                                <div id="ride-model-search-results-{{ submission.id }}" class="absolute z-50 w-full"></div>
+                                <input type="hidden" 
+                                       id="ride-model-input-{{ submission.id }}"
+                                       name="{{ field }}" 
+                                       value="{{ value }}">
+                            </div>
+                        {% elif field == 'description' %}
+                            <textarea name="{{ field }}"
+                                      rows="4"
+                                      class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
+                                      placeholder="General description and notable features">{{ value }}</textarea>
+                        {% elif field == 'min_height_in' or field == 'max_height_in' %}
+                            <input type="number"
+                                   name="{{ field }}"
+                                   value="{{ value }}"
+                                   min="0"
+                                   class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
+                                   placeholder="Height in inches">
+                        {% elif field == 'capacity_per_hour' %}
+                            <input type="number"
+                                   name="{{ field }}"
+                                   value="{{ value }}"
+                                   min="0"
+                                   class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
+                                   placeholder="Theoretical hourly ride capacity">
+                        {% elif field == 'ride_duration_seconds' %}
+                            <input type="number"
+                                   name="{{ field }}"
+                                   value="{{ value }}"
+                                   min="0"
+                                   class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
+                                   placeholder="Total duration of one ride cycle in seconds">
+                        {% else %}
+                            <input type="text"
+                                   name="{{ field }}"
+                                   value="{{ value }}"
+                                   class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500">
+                        {% endif %}
+                    {% endif %}
+                </div>
+                {% endif %}
+                {% endfor %}
+
+                <div class="col-span-2 p-4 border rounded-lg bg-blue-50 dark:bg-blue-900/30 border-blue-200/50 dark:border-blue-700/50">
+                    <label class="block mb-2 text-sm font-medium text-blue-900 dark:text-blue-300">
+                        Notes (required):
+                    </label>
+                    <textarea name="notes"
+                              class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg resize-none dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
+                              rows="3"
+                              required
+                              placeholder="Explain why you're editing this submission"></textarea>
+                </div>
+
+                <div class="flex justify-end col-span-2 gap-3">
+                    <button type="button"
+                            class="px-4 py-2 font-medium text-gray-700 transition-all duration-200 bg-gray-100 rounded-lg hover:bg-gray-200 hover:text-gray-900 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white"
+                            @click="isEditing = false">
+                        Cancel
+                    </button>
+                    <button type="submit"
+                            class="px-4 py-2 font-medium text-white transition-all duration-200 bg-blue-600 rounded-lg hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600">
+                        Save Changes
+                    </button>
+                </div>
+            </form>
+
+            <!-- Keep existing review notes section -->
             {% if submission.notes %}
             <div class="p-4 mt-4 border rounded-lg bg-blue-50 dark:bg-blue-900/30 border-blue-200/50 dark:border-blue-700/50">
                 <div class="text-sm font-medium text-blue-900 dark:text-blue-300">Review Notes:</div>
@@ -82,7 +373,7 @@
             </div>
             {% endif %}
 
-    {% if submission.status == 'NEW' or submission.status == 'ESCALATED' and user.role in 'ADMIN,SUPERUSER' %}
+            {% if submission.status == 'PENDING' or submission.status == 'ESCALATED' and user.role in 'ADMIN,SUPERUSER' %}
             <div class="mt-6 review-notes" x-data="{ showNotes: false }">
                 <div x-show="showNotes" 
                      x-transition:enter="transition ease-out duration-200"
@@ -98,14 +389,20 @@
                 </div>
 
                 <div class="flex items-center justify-end gap-3 action-buttons">
-            <button class="btn-notes"
+                    <button class="inline-flex items-center px-4 py-2.5 font-medium text-gray-700 transition-all duration-200 bg-gray-100 rounded-lg hover:bg-gray-200 hover:text-gray-900 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white shadow-sm hover:shadow-md"
                             @click="showNotes = !showNotes">
                         <i class="mr-2 fas fa-comment-alt"></i>
                         Add Notes
                     </button>
 
+                    <button class="inline-flex items-center px-4 py-2.5 font-medium text-gray-700 transition-all duration-200 bg-gray-100 rounded-lg hover:bg-gray-200 hover:text-gray-900 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white shadow-sm hover:shadow-md"
+                            @click="isEditing = !isEditing">
+                        <i class="mr-2 fas fa-edit"></i>
+                        Edit
+                    </button>
+                    
                     {% if submission.status != 'ESCALATED' or user.role in 'ADMIN,SUPERUSER' %}
-            <button class="btn-approve"
+                    <button class="inline-flex items-center px-4 py-2.5 font-medium text-white transition-all duration-200 bg-green-600 rounded-lg hover:bg-green-500 dark:bg-green-700 dark:hover:bg-green-600 shadow-sm hover:shadow-md"
                             hx-post="{% url 'moderation:approve_submission' submission.id %}"
                             hx-target="#submissions-content"
                             hx-include="closest .review-notes"
@@ -115,7 +412,7 @@
                         Approve
                     </button>
                     
-            <button class="btn-reject"
+                    <button class="inline-flex items-center px-4 py-2.5 font-medium text-white transition-all duration-200 bg-red-600 rounded-lg hover:bg-red-500 dark:bg-red-700 dark:hover:bg-red-600 shadow-sm hover:shadow-md"
                             hx-post="{% url 'moderation:reject_submission' submission.id %}"
                             hx-target="#submissions-content"
                             hx-include="closest .review-notes"
@@ -127,7 +424,7 @@
                     {% endif %}
                     
                     {% if user.role == 'MODERATOR' and submission.status != 'ESCALATED' %}
-            <button class="btn-escalate"
+                    <button class="inline-flex items-center px-4 py-2.5 font-medium text-white transition-all duration-200 bg-yellow-600 rounded-lg hover:bg-yellow-500 dark:bg-yellow-700 dark:hover:bg-yellow-600 shadow-sm hover:shadow-md"
                             hx-post="{% url 'moderation:escalate_submission' submission.id %}"
                             hx-target="#submissions-content"
                             hx-include="closest .review-notes"
@@ -141,6 +438,8 @@
             </div>
             {% endif %}
         </div>
+    </div>
+</div>
 {% empty %}
 <div class="relative p-8 text-center bg-white border rounded-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50">
     <div class="text-gray-600 dark:text-gray-400">