From 33878675613cc9227c3c43c5e7b78cfd8d67c829 Mon Sep 17 00:00:00 2001
From: Bryce <bryce@integreatconsult.com>
Date: Wed, 6 Aug 2025 20:32:11 -0700
Subject: [PATCH] fix: Add flex-wrap to folder card badges to prevent text
 overflow

- Added flex-wrap and gap-1 classes to folder card badge containers
- Updated both folder_card_base.html and folder_card.html templates
- Ensures badges wrap properly when card width is limited
- Improves responsive layout for folder cards with multiple badges
---
 app/templates/partials/folder_card.html      |  4 +-
 app/templates/partials/folder_card_base.html | 49 ++++++++++++++++++++
 2 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 app/templates/partials/folder_card_base.html

diff --git a/app/templates/partials/folder_card.html b/app/templates/partials/folder_card.html
index d9310e5..c4ab096 100644
--- a/app/templates/partials/folder_card.html
+++ b/app/templates/partials/folder_card.html
@@ -28,8 +28,8 @@
         </div>
         
         <!-- Email count badges placed below title but in a separate row -->
-        <div class="flex justify-between items-center mb-2">
-            <div class="flex space-x-1">
+        <div class="flex flex-wrap justify-between items-center mb-2 gap-1">
+            <div class="flex flex-wrap gap-1">
                 <span class="badge badge-outline cursor-pointer">{{ folder.total_count }} emails</span>
                 {% if folder.pending_count > 0 %}
                 <button
diff --git a/app/templates/partials/folder_card_base.html b/app/templates/partials/folder_card_base.html
new file mode 100644
index 0000000..cf4964a
--- /dev/null
+++ b/app/templates/partials/folder_card_base.html
@@ -0,0 +1,49 @@
+<div id="folder-{{ folder.id }}" class="card bg-base-100 shadow-xl border border-base-300 hover:shadow-lg">
+    <div class="card-body" data-loading-states>
+        <div class="flex justify-between items-start mb-2">
+            <h3 class="text-xl font-bold truncate flex-grow">{{ folder.name }}</h3>
+            <div class="flex space-x-2">
+                <button class="btn btn-sm btn-outline"
+                        hx-get="/api/folders/{{ folder.id }}/edit"
+                        hx-target="#modal-holder"
+                        hx-swap="innerHTML"
+                        hx-trigger="click"
+                        data-loading-disable
+                        >
+                    <i class="fas fa-edit" data-loading-class="!hidden"></i>
+                    <span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
+                </button>
+                <button class="btn btn-sm btn-outline btn-error fade-me-out"
+                        hx-delete="/api/folders/{{ folder.id }}"
+                        hx-target="#folders-list"
+                        hx-swap="outerhtml settle:300ms"
+                        hx-confirm="Are you sure you want to delete this folder?"
+                        data-loading-disable
+                        >
+                    <i class="fas fa-trash" data-loading-class="!hidden"></i>
+                    <span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
+                </button>
+            </div>
+        </div>
+        
+        <!-- Priority badge -->
+        <div class="flex flex-wrap justify-between items-center mb-2 gap-1">
+            <div class="flex flex-wrap gap-1">
+                {% block badges %}{% endblock %}
+            </div>
+            {% if folder.priority == 1 %}
+                <span class="badge badge-error">High Priority</span>
+            {% elif folder.priority == -1 %}
+                <span class="badge badge-info">Low Priority</span>
+            {% else %}
+                <span class="badge badge-primary">Normal Priority</span>
+            {% endif %}
+        </div>
+ 
+        <div class="bg-base-200 rounded-box p-4 mb-4">
+            <p class="text-base-content/80">{{ folder.rule_text }}</p>
+        </div>
+        
+        {% block additional_content %}{% endblock %}
+    </div>
+</div>
\ No newline at end of file