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

---
 app/templates/cotton/ui/transactions_action_bar.html | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/templates/cotton/ui/transactions_action_bar.html b/app/templates/cotton/ui/transactions_action_bar.html
index 1f98681..a4099b0 100644
--- a/app/templates/cotton/ui/transactions_action_bar.html
+++ b/app/templates/cotton/ui/transactions_action_bar.html
@@ -17,14 +17,14 @@
             end
           end
         end">
-  <div class="card slide-in-bottom">
-    <div class="card-body p-2 d-flex justify-content-between align-items-center gap-3">
+  <div class="card slide-in-bottom tw:max-w-[90vw]">
+    <div class="card-body p-2 d-flex justify-content-between align-items-center gap-3 tw:overflow-x-auto">
       {% spaceless %}
         <div class="tw:font-bold tw:text-md ms-2" id="selected-count">0</div>
         <div class="vr tw:align-middle"></div>
         <div class="dropdown">
           <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown"
-                  aria-expanded="false">
+                  aria-expanded="false" data-bs-popper-config='{"strategy":"fixed"}'>
             <i class="fa-regular fa-square-check fa-fw"></i>
           </button>
           <ul class="dropdown-menu">
@@ -53,7 +53,8 @@
             <i class="fa-solid fa-pencil"></i>
           </button>
           <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
-                  data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
+                  data-bs-toggle="dropdown" data-bs-popper-config='{"strategy":"fixed"}' aria-expanded="false"
+                  data-bs-auto-close="outside">
             <span class="visually-hidden">{% trans "Toggle Dropdown" %}</span>
           </button>
 
@@ -144,7 +145,8 @@
             <span class="d-none d-md-inline-block" id="real-total-front">0</span>
           </button>
           <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
-                  data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
+                  data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside"
+                  data-bs-popper-config='{"strategy":"fixed"}'>
             <span class="visually-hidden">{% trans "Toggle Dropdown" %}</span>
           </button>