From 02c6d4da74a69c2f24396c91d96f92001397e0ec Mon Sep 17 00:00:00 2001
From: Konrad du Plessis <konradzar@gmail.com>
Date: Fri, 15 May 2026 00:25:51 +0200
Subject: [PATCH] fix(absences): lift filter card stacking context so Reasons
 dropdown wins
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Reasons multi-checkbox dropdown was rendering BEHIND the table
rows even with z-index: 1050 applied. Root cause: the filter card
and the table card are sibling .card elements, both creating their
own stacking contexts. The dropdown's z-index was being measured
inside the filter card's local stacking context, but the table card
(next sibling in document order) sat on top of the whole filter
card in the page's stacking order.

Fix: set position: relative + z-index: 10 on the wrapping <form
class="card mb-3"> so the entire filter card lifts above the table
card globally. The dropdown's z-index: 1050 inside it now resolves
correctly.

Pure template change — no behaviour change, no test change.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 core/templates/core/absences/list.html | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/core/templates/core/absences/list.html b/core/templates/core/absences/list.html
index d5ff933..23b79e1 100644
--- a/core/templates/core/absences/list.html
+++ b/core/templates/core/absences/list.html
@@ -37,7 +37,11 @@ has an inline delete form. CSV export button only shows for admin.
     {% endif %}
 
     {# === Filter bar — 7 fields stacked on mobile, wrapped on desktop === #}
-    <form method="get" class="card mb-3">
+    {# Lift the filter card above the table card so the multi-checkbox    #}
+    {# Reasons dropdown can overflow downward without being clipped by    #}
+    {# the next sibling .card (the table). Requires `position: relative`  #}
+    {# for z-index to apply.                                              #}
+    <form method="get" class="card mb-3" style="position: relative; z-index: 10;">
         <div class="card-body p-2 d-flex flex-wrap gap-2 align-items-end">
             <div>
                 <label class="form-label small mb-0">Worker</label>
@@ -78,6 +82,11 @@ has an inline delete form. CSV export button only shows for admin.
                     <button class="btn btn-outline-secondary btn-sm dropdown-toggle form-select-sm" type="button" data-bs-toggle="dropdown" style="min-width: 140px; text-align: left;">
                         {% if filter_reasons %}{{ filter_reasons|length }} selected{% else %}All{% endif %}
                     </button>
+                    {# z-index: 1050 + the filter card's z-index: 10 (set on the   #}
+                    {# wrapping <form>) lifts this menu above the table card that  #}
+                    {# follows. The form-card lift is the real fix; the local      #}
+                    {# z-index here just keeps the menu above the form's own       #}
+                    {# inputs.                                                     #}
                     <ul class="dropdown-menu p-2" style="min-width: 220px; z-index: 1050;" onclick="event.stopPropagation();">
                         {% for key, label in reason_choices %}
                             <li>