From 7a53e85e3d4dd2bffc9623dfc3ad3745ad189f79 Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Sun, 22 Mar 2026 10:47:10 -0400
Subject: [PATCH] Reduce header dropdown menu padding and spacing for more
 compact design with consistent border radius and fixed-width positioning

---
 frontend/app.js     |  1 +
 frontend/index.html |  6 +++---
 frontend/style.css  | 31 ++++++++++++++++---------------
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/frontend/app.js b/frontend/app.js
index 26044bf..54e99f1 100644
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -191,6 +191,7 @@
           const rect = trigger.getBoundingClientRect();
           menu.style.top = `${rect.bottom + 4}px`;
           menu.style.left = `${rect.left}px`;
+          menu.style.width = `${rect.width}px`;
         }
       });
 
diff --git a/frontend/index.html b/frontend/index.html
index e40c914..8b11d8d 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -200,12 +200,12 @@
       <div class="editor-header">
         <div class="editor-title" id="editor-title">Édition</div>
         <div class="editor-actions">
-          <button class="editor-btn" id="editor-cancel" title="Annuler" aria-label="Annuler">
-            <i data-lucide="rotate-ccw" style="width:16px;height:16px"></i>
-          </button>
           <button class="editor-btn danger" id="editor-delete" title="Supprimer" aria-label="Supprimer">
             <i data-lucide="trash-2" style="width:16px;height:16px"></i>
           </button>
+          <button class="editor-btn" id="editor-cancel" title="Annuler" aria-label="Annuler">
+            <i data-lucide="x" style="width:16px;height:16px"></i>
+          </button>
           <button class="editor-btn primary" id="editor-save" title="Sauvegarder" aria-label="Sauvegarder">
             <i data-lucide="check" style="width:16px;height:16px"></i>
           </button>
diff --git a/frontend/style.css b/frontend/style.css
index 19874fa..db5c08b 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -229,12 +229,11 @@ a:hover {
 .menu-list-row {
   width: 100%;
   display: grid;
-  grid-template-columns: 36px minmax(0, 1fr);
-  gap: 10px;
+  grid-template-columns: 28px minmax(0, 1fr);
   align-items: center;
-  padding: 10px 12px;
-  border-radius: 12px;
-  color: var(--text-primary);
+  gap: 8px;
+  padding: 4px 8px;
+  border-radius: 6px;
   text-align: left;
 }
 
@@ -256,30 +255,31 @@ a:hover {
 }
 
 .menu-list-icon {
-  width: 24px;
-  height: 24px;
+  width: 18px;
+  height: 18px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
   color: var(--accent);
 }
 
 .menu-list-content {
   display: flex;
   flex-direction: column;
-  gap: 3px;
+  gap: 1px;
   min-width: 0;
 }
 
 .menu-list-title {
   font-family: 'JetBrains Mono', monospace;
-  font-size: 0.85rem;
+  font-size: 0.8rem;
   font-weight: 600;
   color: var(--text-primary);
 }
 
 .menu-list-subtitle {
-  font-size: 0.76rem;
+  font-size: 0.7rem;
   color: var(--text-muted);
 }
 
@@ -386,13 +386,13 @@ select {
   right: 0;
   background: var(--bg-secondary);
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 6px;
   box-shadow: 0 8px 24px rgba(0,0,0,0.4);
   max-height: 240px;
   overflow-y: auto;
   z-index: 1000;
   list-style: none;
-  padding: 4px;
+  padding: 3px;
   margin: 0;
 }
 
@@ -401,8 +401,8 @@ select {
 }
 
 .custom-dropdown-option {
-  padding: 8px 12px;
-  border-radius: 6px;
+  padding: 6px 10px;
+  border-radius: 4px;
   cursor: pointer;
   font-family: 'JetBrains Mono', monospace;
   font-size: 0.8rem;
@@ -432,7 +432,8 @@ select {
   z-index: 10000;
   left: auto;
   right: auto;
-  width: 248px;
+  width: auto;
+  min-width: 200px;
 }
 
 .sidebar-dropdown .custom-dropdown-trigger {