notid/email-organizer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Add flex-wrap to folder card badges to prevent text overflow

Browse Source 
- 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
This commit is contained in:
Bryce
2025-08-06 20:32:11 -07:00
parent ab376f5317
commit 3387867561
2 changed files with 51 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/templates/partials/folder_card.html
View File

@@ -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

49
app/templates/partials/folder_card_base.html Normal file
View File

@@ -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>