From c6e003ed8675fff65e2b22ea2850f389c6628cce Mon Sep 17 00:00:00 2001
From: Herculino Trotta <netotrotta@gmail.com>
Date: Sat, 2 Aug 2025 15:36:57 -0300
Subject: [PATCH] fix(ui:transactions): transaction menu overflows screen on
 smaller screens

---
 app/templates/cotton/transaction/item.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/templates/cotton/transaction/item.html b/app/templates/cotton/transaction/item.html
index acecc1d..5971b9b 100644
--- a/app/templates/cotton/transaction/item.html
+++ b/app/templates/cotton/transaction/item.html
@@ -120,8 +120,8 @@
         <div>
           {#      Item actions#}
           <div
-              class="transaction-actions tw:absolute! tw:left-1/2 tw:top-0 tw:-translate-x-1/2 tw:-translate-y-1/2 tw:invisible tw:group-hover/transaction:visible d-flex flex-row card">
-            <div class="card-body p-1 shadow-lg">
+              class="transaction-actions tw:absolute! tw:right-[15px] tw:top-[50%] tw:md:right-auto tw:md:left-1/2 tw:md:top-0 tw:md:-translate-x-1/2 tw:-translate-y-1/2 tw:invisible tw:group-hover/transaction:visible d-flex flex-row card">
+            <div class="card-body p-1 shadow-lg d-flex flex-column flex-md-row gap-1">
               {% if not transaction.deleted %}
                 <a class="btn btn-secondary btn-sm transaction-action"
                    role="button"
@@ -145,7 +145,7 @@
                 <button class="btn btn-secondary btn-sm transaction-action" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                   <i class="fa-solid fa-ellipsis fa-fw"></i>
                 </button>
-                <ul class="dropdown-menu">
+                <ul class="dropdown-menu dropdown-menu-end dropdown-menu-md-start">
                   {% if transaction.category.mute %}
                   <li>
                     <a class="dropdown-item disabled d-flex align-items-center" aria-disabled="true">