From 46af7ec19bfd841e00fdc7c211ad2e10808c5c54 Mon Sep 17 00:00:00 2001
From: NguyenND <ngodanguyen@gmail.com>
Date: Tue, 9 Jun 2026 16:46:02 -0400
Subject: [PATCH] 06/09 Fix admin ticket reply  UI

---
 .../support/admin_ticket_detail.html          | 31 +++++--------------
 1 file changed, 7 insertions(+), 24 deletions(-)

diff --git a/app/templates/support/admin_ticket_detail.html b/app/templates/support/admin_ticket_detail.html
index df6dd73..dcff2b0 100644
--- a/app/templates/support/admin_ticket_detail.html
+++ b/app/templates/support/admin_ticket_detail.html
@@ -1,22 +1,6 @@
 {% extends "base.html" %}
 {% block title %}Ticket #{{ ticket.id }}{% endblock %}
 
-{% block extra_css %}
-<style>
-  .reply-bubble {
-    max-width: 85%;
-    padding: .65rem 1rem;
-    border-radius: 1rem;
-    font-size: .9rem;
-    white-space: pre-wrap;
-    word-break: break-word;
-    line-height: 1.6;
-  }
-  .reply-admin  { background:#d1ecf1; border-bottom-right-radius:.25rem; align-self:flex-end; }
-  .reply-system { background:#f8d7da; border-bottom-left-radius:.25rem; align-self:flex-start; }
-  #reply-thread { display:flex; flex-direction:column; gap:.75rem; }
-</style>
-{% endblock %}
 
 {% block content %}
 <div class="mb-3">
@@ -58,16 +42,15 @@
     <div class="card shadow-sm mb-3">
       <div class="card-header"><i class="bi bi-chat-left-text me-2"></i>Replies</div>
       <div class="card-body">
-        <div id="reply-thread">
+        <div class="d-flex flex-column gap-3">
           {% for reply in replies %}
-          <div class="d-flex flex-column">
-            <div class="reply-bubble reply-admin ms-auto">
-              <div class="text-muted small mb-1">
-                <strong>{{ reply.author.display_name if reply.author else 'Support Team' }}</strong>
-                &nbsp;·&nbsp;{{ reply.created_at.strftime('%b %d, %Y %I:%M %p') }}
-              </div>
-              {{ reply.body }}
+          <div class="border rounded p-3 bg-light">
+            <div class="text-muted small mb-2">
+              <i class="bi bi-person-badge me-1"></i>
+              <strong>{{ reply.author.display_name if reply.author else 'Support Team' }}</strong>
+              &nbsp;·&nbsp;{{ reply.created_at.strftime('%b %d, %Y %I:%M %p') }}
             </div>
+            <div style="white-space:pre-wrap;word-break:break-word;">{{ reply.body }}</div>
           </div>
           {% endfor %}
         </div>