From 7afc4400b7bc22c39f86b94799afa9b40b58e51e Mon Sep 17 00:00:00 2001
From: Tobias Kunze <r@rixx.de>
Date: Fri, 11 Apr 2025 14:00:38 +0200
Subject: [PATCH] Improve status condition display

---
 .../service_instance_detail.html              | 70 ++++++++++---------
 1 file changed, 36 insertions(+), 34 deletions(-)

diff --git a/src/servala/frontend/templates/frontend/organizations/service_instance_detail.html b/src/servala/frontend/templates/frontend/organizations/service_instance_detail.html
index b85642f..7ae410f 100644
--- a/src/servala/frontend/templates/frontend/organizations/service_instance_detail.html
+++ b/src/servala/frontend/templates/frontend/organizations/service_instance_detail.html
@@ -10,8 +10,10 @@
         <div class="row">
             <div class="col-12 col-md-4">
                 <div class="card">
+                    <div class="card-header">
+                        <h4>{% translate "Details" %}</h4>
+                    </div>
                     <div class="card-body">
-                        <h5>{% translate "Details" %}</h5>
                         <dl class="row">
                             <dt class="col-sm-4">{% translate "Service" %}</dt>
                             <dd class="col-sm-8">
@@ -52,42 +54,42 @@
             {% if instance.status_conditions %}
                 <div class="col-12 col-md-8">
                     <div class="card">
+                        <div class="card-header">
+                            <h4>{% translate "Status" %}</h4>
+                        </div>
                         <div class="card-body">
-                            <div class="row mt-4">
-                                <div class="col-12">
-                                    <h5>{% translate "Status Conditions" %}</h5>
-                                    <div class="table-responsive">
-                                        <table class="table table-bordered">
-                                            <thead>
+                            <div class="row">
+                                <div class="table-responsive">
+                                    <table class="table table-bordered">
+                                        <thead>
+                                            <tr>
+                                                <th>{% translate "Type" %}</th>
+                                                <th>{% translate "Status" %}</th>
+                                                <th>{% translate "Last Transition Time" %}</th>
+                                                <th>{% translate "Reason" %}</th>
+                                                <th>{% translate "Message" %}</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            {% for condition in instance.status_conditions %}
                                                 <tr>
-                                                    <th>{% translate "Type" %}</th>
-                                                    <th>{% translate "Status" %}</th>
-                                                    <th>{% translate "Last Transition Time" %}</th>
-                                                    <th>{% translate "Reason" %}</th>
-                                                    <th>{% translate "Message" %}</th>
+                                                    <td>{{ condition.type }}</td>
+                                                    <td>
+                                                        {% if condition.status == "True" %}
+                                                            <span class="badge text-bg-success">True</span>
+                                                        {% elif condition.status == "False" %}
+                                                            <span class="badge text-bg-danger">False</span>
+                                                        {% else %}
+                                                            <span class="badge text-bg-secondary">{{ condition.status }}</span>
+                                                        {% endif %}
+                                                    </td>
+                                                    <td>{{ condition.lastTransitionTime }}</td>
+                                                    <td>{{ condition.reason }}</td>
+                                                    <td>{{ condition.message }}</td>
                                                 </tr>
-                                            </thead>
-                                            <tbody>
-                                                {% for condition in instance.status_conditions %}
-                                                    <tr>
-                                                        <td>{{ condition.type }}</td>
-                                                        <td>
-                                                            {% if condition.status == "True" %}
-                                                                <span class="badge text-bg-success">True</span>
-                                                            {% elif condition.status == "False" %}
-                                                                <span class="badge text-bg-danger">False</span>
-                                                            {% else %}
-                                                                <span class="badge text-bg-secondary">{{ condition.status }}</span>
-                                                            {% endif %}
-                                                        </td>
-                                                        <td>{{ condition.lastTransitionTime }}</td>
-                                                        <td>{{ condition.reason }}</td>
-                                                        <td>{{ condition.message }}</td>
-                                                    </tr>
-                                                {% endfor %}
-                                            </tbody>
-                                        </table>
-                                    </div>
+                                            {% endfor %}
+                                        </tbody>
+                                    </table>
                                 </div>
                             </div>
                         </div>