From e9df8a3d27ea154e4a280cc4be465156a54610cd Mon Sep 17 00:00:00 2001
From: Andrew Yager <andrew@rwts.com.au>
Date: Sat, 28 Feb 2026 15:59:22 +1100
Subject: [PATCH] fix: correct broken div nesting in location detail mobile
 cards

The thumbnail commit (4024f5e) introduced an extra </div> in the
mobile card layout, causing the sm:hidden container to close after
the first card. Subsequent cards rendered outside the container,
appearing as unstyled cards on desktop below the table.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/templates/assets/location_detail.html | 43 ++++++++++++-----------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/src/templates/assets/location_detail.html b/src/templates/assets/location_detail.html
index f745786..d6d48ad 100644
--- a/src/templates/assets/location_detail.html
+++ b/src/templates/assets/location_detail.html
@@ -220,29 +220,30 @@ <h3 class="font-medium text-stage-900 dark:text-cream">{{ child.name }}</h3>
                             <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                             {% endif %}
                         </div>
-                        <div class="flex-1 min-w-0 flex items-start justify-between gap-2">
-                        <div class="min-w-0">
-                            <div class="font-medium text-stage-900 dark:text-cream truncate">{{ asset.name }}</div>
-                            <div class="text-xs text-stage-500 dark:text-cream/40 mt-0.5 font-mono">{{ asset.barcode }}</div>
-                        </div>
-                        <div class="text-right shrink-0">
-                            {% if asset.is_checked_out %}
-                            <span class="text-xs text-purple-400">Checked out</span>
-                            {% if active_tab == "checked_out" and asset.checkout_due_date %}
-                            <br><span class="text-xs text-stage-500 dark:text-cream/40">Due {{ asset.checkout_due_date|date:"d M Y" }}</span>
-                            {% endif %}
-                            {% else %}
-                            <span class="text-xs text-stage-500 dark:text-cream/40">{{ asset.get_status_display }}</span>
-                            {% endif %}
+                        <div class="flex-1 min-w-0">
+                            <div class="flex items-start justify-between gap-2">
+                                <div class="min-w-0">
+                                    <div class="font-medium text-stage-900 dark:text-cream truncate">{{ asset.name }}</div>
+                                    <div class="text-xs text-stage-500 dark:text-cream/40 mt-0.5 font-mono">{{ asset.barcode }}</div>
+                                </div>
+                                <div class="text-right shrink-0">
+                                    {% if asset.is_checked_out %}
+                                    <span class="text-xs text-purple-400">Checked out</span>
+                                    {% if active_tab == "checked_out" and asset.checkout_due_date %}
+                                    <br><span class="text-xs text-stage-500 dark:text-cream/40">Due {{ asset.checkout_due_date|date:"d M Y" }}</span>
+                                    {% endif %}
+                                    {% else %}
+                                    <span class="text-xs text-stage-500 dark:text-cream/40">{{ asset.get_status_display }}</span>
+                                    {% endif %}
+                                </div>
+                            </div>
+                            <div class="flex flex-wrap gap-x-3 gap-y-1 mt-2 text-xs text-stage-500 dark:text-cream/40">
+                                {% if asset.category %}<span>{{ asset.category.name }}</span>{% endif %}
+                                {% if asset.department %}<span>{{ asset.department.name }}</span>{% endif %}
+                                <span>{{ asset.get_condition_display }}</span>
+                            </div>
                         </div>
                     </div>
-                    <div class="flex flex-wrap gap-x-3 gap-y-1 mt-2 text-xs text-stage-500 dark:text-cream/40">
-                        {% if asset.category %}<span>{{ asset.category.name }}</span>{% endif %}
-                        {% if asset.department %}<span>{{ asset.department.name }}</span>{% endif %}
-                        <span>{{ asset.get_condition_display }}</span>
-                    </div>
-                    </div>
-                    </div>
                 </a>
                 {% endfor %}
             </div>