From 5cf49cfcd34b5ca16f418b3b10ce0f725226ec50 Mon Sep 17 00:00:00 2001
From: Anton Tranelis <31516529+antontranelis@users.noreply.github.com>
Date: Tue, 11 Nov 2025 15:14:59 +0100
Subject: [PATCH] fix(lib): align zoom-control and tags (#427)

---
 .../Components/Map/Subcomponents/Controls/TagsControl.tsx   | 2 +-
 lib/src/Components/Map/UtopiaMap.tsx                        | 1 +
 lib/src/Components/Map/UtopiaMapInner.tsx                   | 6 +++++-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/lib/src/Components/Map/Subcomponents/Controls/TagsControl.tsx b/lib/src/Components/Map/Subcomponents/Controls/TagsControl.tsx
index d793cccf..6335cc84 100644
--- a/lib/src/Components/Map/Subcomponents/Controls/TagsControl.tsx
+++ b/lib/src/Components/Map/Subcomponents/Controls/TagsControl.tsx
@@ -6,7 +6,7 @@ export const TagsControl = () => {
   const removeFilterTag = useRemoveFilterTag()
 
   return (
-    <div className='tw:flex tw:flex-wrap tw:mt-4 tw:w-[calc(100vw-2rem)] tw:max-w-xs'>
+    <div className='tw:flex tw:flex-wrap tw:mt-4 tw:w-[calc(100vw-2rem)] tw:max-w-xs tw:relative'>
       {filterTags.map((tag) => (
         <div
           key={tag.id}
diff --git a/lib/src/Components/Map/UtopiaMap.tsx b/lib/src/Components/Map/UtopiaMap.tsx
index 44d87faf..51b202f7 100644
--- a/lib/src/Components/Map/UtopiaMap.tsx
+++ b/lib/src/Components/Map/UtopiaMap.tsx
@@ -133,6 +133,7 @@ function UtopiaMap({
           maplibreStyle={maplibreStyle}
           zoomOffset={zoomOffset}
           tileSize={tileSize}
+          showZoomControl={showZoomControl}
         >
           {children}
         </UtopiaMapInner>
diff --git a/lib/src/Components/Map/UtopiaMapInner.tsx b/lib/src/Components/Map/UtopiaMapInner.tsx
index b25f9b13..aa6786cb 100644
--- a/lib/src/Components/Map/UtopiaMapInner.tsx
+++ b/lib/src/Components/Map/UtopiaMapInner.tsx
@@ -64,6 +64,7 @@ export function UtopiaMapInner({
   maplibreStyle,
   zoomOffset = 0,
   tileSize = 256,
+  showZoomControl,
 }: {
   children?: React.ReactNode
   geo?: GeoJsonObject
@@ -81,6 +82,7 @@ export function UtopiaMapInner({
   maplibreStyle?: string
   zoomOffset?: number
   tileSize?: number
+  showZoomControl?: boolean
 }) {
   const selectNewItemPosition = useSelectPosition()
   const setSelectNewItemPosition = useSetSelectPosition()
@@ -285,7 +287,9 @@ export function UtopiaMapInner({
       <Outlet />
       <Control position='topLeft' zIndex='1000' absolute>
         <SearchControl />
-        <TagsControl />
+        <div className={`${showZoomControl ? 'tw:pl-14' : ''}`}>
+          <TagsControl />
+        </div>
       </Control>
       <Control position='bottomLeft' zIndex='999' absolute>
         {showFullscreenControl && <FullscreenControl />}