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();
menu.style.top = `${rect.bottom + 4}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-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>

31
frontend/style.css
View File

@ -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 {