From 55371a9d0b1184134abe5bde4c7f42f6f238365f Mon Sep 17 00:00:00 2001
From: Ross <ross@xkjq.uk>
Date: Fri, 31 Oct 2025 20:56:33 +0000
Subject: [PATCH] Refactor case display layout for improved organization and
 responsiveness

---
 atlas/templates/atlas/case_display_block.html | 47 +++++++++++++++----
 1 file changed, 39 insertions(+), 8 deletions(-)

diff --git a/atlas/templates/atlas/case_display_block.html b/atlas/templates/atlas/case_display_block.html
index 71e41093..0ef100b6 100755
--- a/atlas/templates/atlas/case_display_block.html
+++ b/atlas/templates/atlas/case_display_block.html
@@ -140,11 +140,32 @@
             </ul>
         </p>
 
-        <p class="pre-whitespace"><b>History:</b> {{ case.history |linebreaks}}</p>
-
-        <p class="pre-whitespace"><b>Discussion:</b> {{ case.discussion |linebreaks}}</p>
-
-        <p class="pre-whitespace"><b>Report:</b> {{ case.report |linebreaks}}</p>
+    <div class="row g-3 mb-3">
+            <div class="col-12 col-md-4">
+                <div class="card h-100">
+                    <div class="card-header">History</div>
+                    <div class="card-body">
+                        <div class="pre-whitespace">{{ case.history|linebreaks }}</div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-12 col-md-4">
+                <div class="card h-100">
+                    <div class="card-header">Discussion</div>
+                    <div class="card-body">
+                        <div class="pre-whitespace">{{ case.discussion|linebreaks }}</div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-12 col-md-4">
+                <div class="card h-100">
+                    <div class="card-header">Report</div>
+                    <div class="card-body">
+                        <div class="pre-whitespace">{{ case.report|linebreaks }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
         <p class="pre-whitespace"><b>Resource</b><br/>{% for caseresource in case.caseresource_set.all %}
             <a href='{% url "atlas:resource_detail" caseresource.resource.pk %}'>{{caseresource.resource.name}}</a>
             {% if caseresource.pre_review %}
@@ -157,7 +178,9 @@
 
         <div class="pre-whitespace multi-image-block"><b>Series:</b>
             <form>
-                {% partial case-series %}
+                <div class="d-flex flex-wrap gap-2 align-items-start" id="case-series-row">
+                    {% partial case-series %}
+                </div>
             </form>
             <span>
                 <button type="button"
@@ -227,7 +250,7 @@
             href="{% url 'atlas:case_scrap' pk=case.pk %}">(toggle)</a> {% endcomment %}
 
         <div class="atlas-answer">
-            <p class="pre-whitespace">
+            <div class="pre-whitespace">
                 Condition:
                 <ul>
                     {% for con in case.condition.all %}
@@ -373,7 +396,7 @@
                         </ul>
                     </details>
                 </div>
-            </p>
+            </div>
         </div>
         Subspecialty:
         <ul>
@@ -728,6 +751,14 @@
             background-color: blue;
             transition: background-color 0.3s ease, border 0.3s ease;
         }
+        /* Make series blocks act as flex items and wrap neatly on small screens */
+        .series-block {
+            display: inline-block;
+            vertical-align: top;
+            min-width: 180px;
+            max-width: 320px;
+            margin-right: 0.5rem;
+        }
         #series-reorder-list .dragging {
             opacity: 0.5;
         }