From ebbaccbbaa2ac3797259aab44915b784876a75b8 Mon Sep 17 00:00:00 2001
From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com>
Date: Sun, 27 Jul 2025 18:49:22 +0200
Subject: [PATCH] Align header items with flexbox

---
 app/assets/stylesheets/common.scss                 | 10 +---------
 app/views/layouts/_header.html.erb                 |  8 ++++----
 app/views/layouts/_select_language_button.html.erb |  2 +-
 3 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index fc7c9f91b..d650d0cf0 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -69,14 +69,10 @@ time[title] {
 
 #menu-icon {
   display: none;
-  position: absolute;
-  top: 0;
-  right: 0;
   background: image-url("menu-icon.svg") no-repeat;
   background-size: 30px 30px;
   width: 30px;
   height: 30px;
-  margin: 14px 10px 0 0;
   opacity: 0.6;
 }
 
@@ -98,6 +94,7 @@ header {
   h1 {
     height: $headerHeight;
     font-size: 18px;
+    gap: $lineheight * 0.5;
   }
 
   .btn {
@@ -229,11 +226,6 @@ body.small-nav {
 
 /* Rules for language selector */
 
-button.d-md-none[data-bs-target="#select_language_dialog"] {
-  right: 50px;
-  top: 11px;
-}
-
 .select_language_list {
   column-width: 160px;
 
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index b8fcfc13a..84f006190 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -1,12 +1,12 @@
 <header class="d-flex bg-body text-nowrap closed z-3">
-  <h1 class="d-flex m-0 fw-semibold">
-    <a href="<%= root_path %>" class="icon-link gap-1 text-body-emphasis text-decoration-none geolink">
+  <h1 class="d-flex m-0 align-items-center fw-semibold">
+    <a href="<%= root_path %>" class="icon-link gap-1 me-auto text-body-emphasis text-decoration-none geolink">
       <%= image_tag "osm_logo.svg", :alt => t("layouts.logo.alt_text"), :size => 30 %>
       <%= t "layouts.project_name.h1" %>
     </a>
+    <%= render "layouts/select_language_button", :extra_classes => ["border-secondary border-opacity-10 d-md-none"] %>
+    <a href="#" id="menu-icon"></a>
   </h1>
-  <%= render "layouts/select_language_button", :extra_classes => ["border-secondary border-opacity-10 d-md-none position-absolute"] %>
-  <a href="#" id="menu-icon"></a>
   <nav class='primary'>
     <%= content_for :header %>
     <div id="edit_tab" class="btn-group">
diff --git a/app/views/layouts/_select_language_button.html.erb b/app/views/layouts/_select_language_button.html.erb
index 4c656001e..4adb9420b 100644
--- a/app/views/layouts/_select_language_button.html.erb
+++ b/app/views/layouts/_select_language_button.html.erb
@@ -1,5 +1,5 @@
 <%= tag.button (inline_svg_tag "icons/language.svg"),
                :type => "button",
-               :class => ["btn btn-outline-secondary px-2", *extra_classes],
+               :class => ["btn btn-outline-secondary align-self-stretch py-1 px-2", *extra_classes],
                :title => t(".title"),
                :data => { :bs_toggle => "modal", :bs_target => "#select_language_dialog" } %>
-- 
2.39.5