From 8930b3cbb0e9bfc4de9b7548b569658a8b3bdf40 Mon Sep 17 00:00:00 2001
From: Dalneberg <130543993+Dalneberg@users.noreply.github.com>
Date: Tue, 9 Apr 2024 08:59:55 +0200
Subject: [PATCH] fix: make items in toolbars and navigation use the
 align-items: flex-start strategy and tooltips in the same containers relate
 to the items (#1984)

---
 scss/_viewer.scss      | 8 ++++++++
 src/components/main.js | 4 ++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/scss/_viewer.scss b/scss/_viewer.scss
index e7697928e..33b8852e9 100644
--- a/scss/_viewer.scss
+++ b/scss/_viewer.scss
@@ -17,6 +17,14 @@
   margin-top: .5rem;
 }
 
+.o-navigation button {
+  position: relative;
+}
+
+.o-maptools button {
+  position: relative;
+}
+
 .o-footer {
   background-color: $black;
   background-color: rgba(0, 0, 0, 0.8);
diff --git a/src/components/main.js b/src/components/main.js
index 6d69eb80e..75206fc87 100644
--- a/src/components/main.js
+++ b/src/components/main.js
@@ -6,8 +6,8 @@ export default function Main(options = {}) {
   } = options;
 
   const cls = `${clsSettings} o-main transparent relative flex column grow transparent height-full no-margin`.trim();
-  const navigation = El({ cls: 'o-navigation flex column relative transparent spacing-vertical-small' });
-  const mapTools = El({ cls: 'o-maptools flex column relative transparent spacing-vertical-small' });
+  const navigation = El({ cls: 'o-navigation flex column relative transparent spacing-vertical-small align-start' });
+  const mapTools = El({ cls: 'o-maptools flex column relative transparent spacing-vertical-small align-start' });
   const miscTools = El({ cls: 'o-misc flex column relative transparent spacing-vertical-small' });
   const bottomTools = El({ cls: 'o-tools-bottom absolute transparent bottom-left width-full no-margin' });