DogFatherGit/vans-diy-bastelbedarf
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Konto-Dropdown: Menüpunkte sauber ausgerichtet statt schiefem Emoji-Versatz

Browse Source 
"Mein Konto" und "Abmelden" starteten je nach Breite des Emojis (👤 vs 🚪)
an leicht unterschiedlichen Stellen. Jetzt echtes Flex-Layout mit fester
Icon-Spalte (1.2em, zentriert) — beide Labels stehen exakt untereinander.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
2026-08-03 17:52:32 +02:00
co-authored by Claude Sonnet 5
parent 2c6d4dedae
commit 25055d9345
2 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/Layout.astro
+2 -2
View File
@@ -102,8 +102,8 @@ const p = (href: string) => `${localePrefix(lang)}${href}`;
<span class="chevron" aria-hidden="true">▼</span> <span class="chevron" aria-hidden="true">▼</span>
</button> </button>
<div class="account-dropdown" id="account-dropdown" role="menu"> <div class="account-dropdown" id="account-dropdown" role="menu">
<a href={p("/konto/angemeldet/")} role="menuitem">👤 {t.accountMenu.myAccount}</a> <a href={p("/konto/angemeldet/")} role="menuitem"><span class="account-dropdown-icon" aria-hidden="true">👤</span>{t.accountMenu.myAccount}</a>
<button type="button" id="account-logout-btn" role="menuitem">🚪 {t.accountMenu.logout}</button> <button type="button" id="account-logout-btn" role="menuitem"><span class="account-dropdown-icon" aria-hidden="true">🚪</span>{t.accountMenu.logout}</button>
</div> </div>
</div> </div>
</div> </div>
src/styles/global.css
+7 -1
View File
@@ -674,7 +674,9 @@ a:focus-visible, button:focus-visible {
.account-menu.open .account-dropdown { display: flex; } .account-menu.open .account-dropdown { display: flex; }
.account-dropdown a, .account-dropdown a,
.account-dropdown button { .account-dropdown button {
display: block; display: flex;
align-items: center;
gap: 0.6em;
width: 100%; width: 100%;
text-align: left; text-align: left;
background: none; background: none;
@@ -686,6 +688,10 @@ a:focus-visible, button:focus-visible {
cursor: pointer; cursor: pointer;
transition: background 0.15s var(--ease); transition: background 0.15s var(--ease);
} }
/* Feste Icon-Spalte, statt das Emoji einfach vor den Text zu schreiben — sonst starten "Mein
Konto" und "Abmelden" je nach Emoji-Breite an leicht unterschiedlichen Stellen und wirken
unausgerichtet. Mit fixer Breite + zentriertem Icon stehen alle Labels exakt untereinander. */
.account-dropdown-icon { flex-shrink: 0; width: 1.2em; text-align: center; }
.account-dropdown a:hover, .account-dropdown a:hover,
.account-dropdown button:hover { background: color-mix(in srgb, var(--c-accent) 12%, transparent); } .account-dropdown button:hover { background: color-mix(in srgb, var(--c-accent) 12%, transparent); }
@media (max-width: 860px) { @media (max-width: 860px) {