From 79cd6c2d550ec5aa9d309cb0e903c091700cfe94 Mon Sep 17 00:00:00 2001
From: Frank Tovar <mail@franktovar.de>
Date: Wed, 4 Feb 2026 20:59:58 +0100
Subject: [PATCH] Align auth lang switch next to title

---
 wwwroot/css/forms-and-auth.css |  7 +++++++
 wwwroot/css/layout.css         |  4 +++-
 wwwroot/index.html             | 13 ++++++-------
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/wwwroot/css/forms-and-auth.css b/wwwroot/css/forms-and-auth.css
index d025147..8a12ad4 100644
--- a/wwwroot/css/forms-and-auth.css
+++ b/wwwroot/css/forms-and-auth.css
@@ -15,3 +15,10 @@
     height: auto;
     filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.25));
 }
+
+.auth-title-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+}
diff --git a/wwwroot/css/layout.css b/wwwroot/css/layout.css
index eed8457..3d4db96 100644
--- a/wwwroot/css/layout.css
+++ b/wwwroot/css/layout.css
@@ -36,10 +36,12 @@
     background: #fffaf3;
     border-radius: 10px;
     padding: 6px 10px;
-    font-size: 16px;
     cursor: pointer;
     min-width: 44px;
     font-family: "Twemoji Country Flags", "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", emoji, sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    font-style: normal;
 }
 .lang-menu {
     position: absolute;
diff --git a/wwwroot/index.html b/wwwroot/index.html
index 4e9c38f..f228b18 100644
--- a/wwwroot/index.html
+++ b/wwwroot/index.html
@@ -7,6 +7,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700&family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap" rel="stylesheet">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="stylesheet" href="styles.css">
   <!-- Optional: set data-app-base if served from a subfolder (e.g., /vote) -->
@@ -17,15 +18,13 @@
     <div class="auth-logo">
       <img src="logo.png" alt="Pick'n'Play logo" />
     </div>
-    <div class="stack">
+    <div class="auth-title-row">
       <h2 id="auth-title" data-i18n="auth.loginHeading">Log in</h2>
-    </div>
-    <div class="stack lang-field">
       <div class="lang-switch" id="lang-switch-auth">
         <button class="lang-button" type="button" aria-label="Language" title="Language">🌐</button>
         <div class="lang-menu hidden">
-          <button type="button" data-lang="en" title="English" data-i18n-attr="title">🇺🇸 <span class="sr-only" data-i18n="lang.en">English</span></button>
-          <button type="button" data-lang="de" title="Deutsch" data-i18n-attr="title">🇩🇪 <span class="sr-only" data-i18n="lang.de">Deutsch</span></button>
+          <button type="button" data-lang="en" title="English" data-i18n-attr="title" class="flag-button">🇺🇸</button>
+          <button type="button" data-lang="de" title="Deutsch" data-i18n-attr="title" class="flag-button">🇩🇪</button>
         </div>
       </div>
     </div>
@@ -79,8 +78,8 @@
       <div class="lang-switch" id="lang-switch-status">
         <button class="lang-button" type="button" aria-label="Language" title="Language">🌐</button>
         <div class="lang-menu hidden">
-          <button type="button" data-lang="en" title="English" data-i18n-attr="title">🇺🇸 <span class="sr-only" data-i18n="lang.en">English</span></button>
-          <button type="button" data-lang="de" title="Deutsch" data-i18n-attr="title">🇩🇪 <span class="sr-only" data-i18n="lang.de">Deutsch</span></button>
+          <button type="button" data-lang="en" title="English" data-i18n-attr="title" class="flag-button">🇺🇸</button>
+          <button type="button" data-lang="de" title="Deutsch" data-i18n-attr="title" class="flag-button">🇩🇪</button>
         </div>
       </div>
     </div>