From 14bce805e0acc7b1ea4f2e83e508bbd60cdff4d4 Mon Sep 17 00:00:00 2001
From: Jules <jules.dubois@gmail.com>
Date: Tue, 5 May 2026 23:46:40 +0200
Subject: [PATCH] fix: menu transfert flottant hors tableau (position fixed via
 getBoundingClientRect)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web/index.php | 52 +++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 38 insertions(+), 14 deletions(-)

diff --git a/web/index.php b/web/index.php
index 0bd0768..5e9dee1 100644
--- a/web/index.php
+++ b/web/index.php
@@ -66,6 +66,12 @@ html_navbar('mail');
     </div>
 </div>
 
+<!-- Menu transfert flottant (hors tableau) -->
+<div id="transfer-menu" style="display:none;position:fixed;z-index:9998;min-width:200px" class="card shadow border-0">
+    <div class="card-header py-2 small fw-semibold text-muted"><i class="bi bi-share me-1"></i>Transférer vers…</div>
+    <ul class="list-group list-group-flush" id="transfer-menu-list"></ul>
+</div>
+
 <!-- Toast -->
 <div class="position-fixed bottom-0 end-0 p-3" style="z-index:9999">
     <div id="toast-el" class="toast align-items-center border-0" role="alert">
@@ -92,23 +98,41 @@ function showToast(msg, type = 'success') {
 function buildTransferDropdown(sourceId, currentUsername) {
     const others = ALL_ACCOUNTS.filter(a => a.username !== currentUsername);
     if (!others.length) {
-        return `<button class="btn btn-sm btn-outline-secondary" disabled title="Aucun autre compte disponible">
-            <i class="bi bi-share"></i>
-        </button>`;
+        return `<button class="btn btn-sm btn-outline-secondary" disabled title="Aucun autre compte disponible"><i class="bi bi-share"></i></button>`;
     }
-    const items = others.map(a =>
-        `<li><a class="dropdown-item" href="#" onclick="doTransfer(event,${sourceId},${a.id},'${a.username}')">
-            <i class="bi bi-arrow-right-circle me-1 text-primary"></i>${escHtml(a.username)}${a.display_name ? ' <span class="text-muted">— '+escHtml(a.display_name)+'</span>' : ''}
-        </a></li>`
-    ).join('');
-    return `<div class="btn-group">
-        <button class="btn btn-sm btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" data-bs-strategy="fixed" title="Transférer vers…">
-            <i class="bi bi-share"></i>
-        </button>
-        <ul class="dropdown-menu dropdown-menu-end shadow">${items}</ul>
-    </div>`;
+    return `<button class="btn btn-sm btn-outline-primary" title="Transférer vers…" onclick="openTransferMenu(event,${sourceId},'${currentUsername}')"><i class="bi bi-share"></i></button>`;
 }
 
+function openTransferMenu(e, sourceId, currentUsername) {
+    e.stopPropagation();
+    const btn    = e.currentTarget;
+    const rect   = btn.getBoundingClientRect();
+    const menu   = document.getElementById('transfer-menu');
+    const list   = document.getElementById('transfer-menu-list');
+    const others = ALL_ACCOUNTS.filter(a => a.username !== currentUsername);
+
+    list.innerHTML = others.map(a =>
+        `<li class="list-group-item list-group-item-action py-2 px-3" style="cursor:pointer"
+             onclick="doTransfer(event,${sourceId},${a.id},'${escHtml(a.username)}')">
+            <i class="bi bi-arrow-right-circle me-2 text-primary"></i>${escHtml(a.username)}
+            ${a.display_name ? '<span class="text-muted small"> — '+escHtml(a.display_name)+'</span>' : ''}
+        </li>`
+    ).join('');
+
+    // Positionne sous le bouton, recadre si déborde à droite
+    menu.style.display = 'block';
+    const menuW = menu.offsetWidth;
+    let left = rect.left;
+    if (left + menuW > window.innerWidth - 8) left = window.innerWidth - menuW - 8;
+    menu.style.top  = (rect.bottom + 4) + 'px';
+    menu.style.left = left + 'px';
+}
+
+// Ferme le menu si on clique ailleurs
+document.addEventListener('click', () => {
+    document.getElementById('transfer-menu').style.display = 'none';
+});
+
 function doTransfer(e, sourceId, targetId, targetName) {
     e.preventDefault();
     const fd = new FormData();