From 29eaa01a4fef10e173bf284be68fd4e788d7f022 Mon Sep 17 00:00:00 2001
From: Sandeep Chauhan <sandeepsajan0@gmail.com>
Date: Sun, 31 Mar 2024 01:23:39 +0530
Subject: [PATCH] Fix applicant dashboard invoices table Ui for smaller screens
 (#3838)

Fixes #3827
---
 .../templates/dashboard/applicant_dashboard.html          | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/hypha/apply/dashboard/templates/dashboard/applicant_dashboard.html b/hypha/apply/dashboard/templates/dashboard/applicant_dashboard.html
index a8f6a5209..e5af42f98 100644
--- a/hypha/apply/dashboard/templates/dashboard/applicant_dashboard.html
+++ b/hypha/apply/dashboard/templates/dashboard/applicant_dashboard.html
@@ -78,17 +78,17 @@
                 </div>
                 {% for invoice in active_invoices.data %}
                     <div class="wrapper wrapper--status-bar-outer">
-                        <div class="wrapper wrapper--status-bar-inner ps-4 pe-4">
-                            <div class="max-w-[33%] w-full text-start my-auto">
+                        <div class="wrapper flex flex-wrap justify-between ps-4 pe-4">
+                            <div class="md:w-1/3 flex flex-col item-start my-auto">
                                 <h4 class="heading heading--no-margin font-bold"><a class="link" href="{{ invoice.get_absolute_url }}">
                                     {% if invoice.invoice_number %}{{ invoice.invoice_number }}{% else %}{{ invoice.vendor_document_number }}{% endif %}
                                 </a></h4>
                                 <p class="m-0 text-fg-muted text-sm">{% trans "Date added: " %} {{ invoice.requested_at }}</p>
                             </div>
-                            <div class="max-w-[33%] w-full text-center my-auto">
+                            <div class="md:w-1/3 flex flex-col items-center text-center my-auto">
                                 <p class="text-2xl">{% if invoice.invoice_amount %}{{ invoice.invoice_amount | format_number_as_currency }}{% else %}-{% endif %}</p>
                             </div>
-                            <div class="max-w-[33%] w-full flex my-auto">
+                            <div class="md:w-1/3 flex flex-col items-end my-auto">
                                 {% display_invoice_table_status_for_user invoice.status request.user as invoice_status %}
                                 <div class="w-full flex-1"></div>
                                 <div class="max-w-fit w-full text-end">
-- 
GitLab