Projets/ObsiGate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reduce header dropdown menu padding and spacing for more compact design with consistent border radius and fixed-width positioning

Browse Source
This commit is contained in:
Bruno Charest 2026-03-22 10:47:10 -04:00
parent f34f5ad708
commit 7a53e85e3d
3 changed files with 20 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/app.js
View File

@ -191,6 +191,7 @@
const rect = trigger.getBoundingClientRect(); const rect = trigger.getBoundingClientRect();
menu.style.top = `${rect.bottom + 4}px`; menu.style.top = `${rect.bottom + 4}px`;
menu.style.left = `${rect.left}px`; menu.style.left = `${rect.left}px`;
menu.style.width = `${rect.width}px`;
} }
}); });

6
frontend/index.html
View File

@ -200,12 +200,12 @@
<div class="editor-header"> <div class="editor-header">
<div class="editor-title" id="editor-title">Édition</div> <div class="editor-title" id="editor-title">Édition</div>
<div class="editor-actions"> <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"> <button class="editor-btn danger" id="editor-delete" title="Supprimer" aria-label="Supprimer">
<i data-lucide="trash-2" style="width:16px;height:16px"></i> <i data-lucide="trash-2" style="width:16px;height:16px"></i>
</button> </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"> <button class="editor-btn primary" id="editor-save" title="Sauvegarder" aria-label="Sauvegarder">
<i data-lucide="check" style="width:16px;height:16px"></i> <i data-lucide="check" style="width:16px;height:16px"></i>
</button> </button>

31
frontend/style.css
View File

@ -229,12 +229,11 @@ a:hover {
.menu-list-row { .menu-list-row {
width: 100%; width: 100%;
display: grid; display: grid;
grid-template-columns: 36px minmax(0, 1fr); grid-template-columns: 28px minmax(0, 1fr);
gap: 10px;
align-items: center; align-items: center;
padding: 10px 12px; gap: 8px;
border-radius: 12px; padding: 4px 8px;
color: var(--text-primary); border-radius: 6px;
text-align: left; text-align: left;
} }
@ -256,30 +255,31 @@ a:hover {
} }
.menu-list-icon { .menu-list-icon {
width: 24px; width: 18px;
height: 24px; height: 18px;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-shrink: 0;
color: var(--accent); color: var(--accent);
} }
.menu-list-content { .menu-list-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 3px; gap: 1px;
min-width: 0; min-width: 0;
} }
.menu-list-title { .menu-list-title {
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
font-size: 0.85rem; font-size: 0.8rem;
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--text-primary);
} }
.menu-list-subtitle { .menu-list-subtitle {
font-size: 0.76rem; font-size: 0.7rem;
color: var(--text-muted); color: var(--text-muted);
} }
@ -386,13 +386,13 @@ select {
right: 0; right: 0;
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 8px; border-radius: 6px;
box-shadow: 0 8px 24px rgba(0,0,0,0.4); box-shadow: 0 8px 24px rgba(0,0,0,0.4);
max-height: 240px; max-height: 240px;
overflow-y: auto; overflow-y: auto;
z-index: 1000; z-index: 1000;
list-style: none; list-style: none;
padding: 4px; padding: 3px;
margin: 0; margin: 0;
} }
@ -401,8 +401,8 @@ select {
} }
.custom-dropdown-option { .custom-dropdown-option {
padding: 8px 12px; padding: 6px 10px;
border-radius: 6px; border-radius: 4px;
cursor: pointer; cursor: pointer;
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
font-size: 0.8rem; font-size: 0.8rem;
@ -432,7 +432,8 @@ select {
z-index: 10000; z-index: 10000;
left: auto; left: auto;
right: auto; right: auto;
width: 248px; width: auto;
min-width: 200px;
} }
.sidebar-dropdown .custom-dropdown-trigger { .sidebar-dropdown .custom-dropdown-trigger {