Fix filter tags overlapping zoom control by adjusting positioning

Co-authored-by: antontranelis <31516529+antontranelis@users.noreply.github.com>

lib/src/Components/Map/Subcomponents/Controls/Control.tsx

@@ -7,11 +7,13 @@ export const Control = ({
   children,
   zIndex,
   absolute,
+  showZoomControl = false,
 }: {
   position: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'
   children: React.ReactNode
   zIndex: string
   absolute: boolean
+  showZoomControl?: boolean
 }) => {
   const controlContainerRef = createRef<HTMLDivElement>()
 
@@ -22,11 +24,19 @@ export const Control = ({
     }
   }, [controlContainerRef])
 
+  // Calculate left position when zoom control is present
+  const getLeftPosition = () => {
+    if ((position === 'topLeft' || position === 'bottomLeft') && showZoomControl) {
+      return 'tw:left-20' // Approximately 5rem (80px) to account for zoom control width
+    }
+    return position === 'topLeft' || position === 'bottomLeft' ? 'tw:left-4' : ''
+  }
+
   return (
     <div
       ref={controlContainerRef}
       style={{ zIndex }}
-      className={`${absolute && 'tw:absolute'} tw:z-999 tw:flex-col ${position === 'topLeft' && 'tw:top-4 tw:left-4'} ${position === 'bottomLeft' && 'tw:bottom-4 tw:left-4'} ${position === 'topRight' && 'tw:bottom-4 tw:right-4'} ${position === 'bottomRight' && 'tw:bottom-4 tw:right-4'}`}
+      className={`${absolute && 'tw:absolute'} tw:z-999 tw:flex-col ${position === 'topLeft' && `tw:top-4 ${getLeftPosition()}`} ${position === 'bottomLeft' && `tw:bottom-4 ${getLeftPosition()}`} ${position === 'topRight' && 'tw:bottom-4 tw:right-4'} ${position === 'bottomRight' && 'tw:bottom-4 tw:right-4'}`}
     >
       {children}
     </div>

lib/src/Components/Map/UtopiaMap.tsx

@@ -106,6 +106,7 @@ function UtopiaMap({
           showFilterControl={showFilterControl}
           showGratitudeControl={showGratitudeControl}
           showLayerControl={showLayerControl}
+          showZoomControl={showZoomControl}
           donationWidget={donationWidget}
           showThemeControl={showThemeControl}
           defaultTheme={defaultTheme}

lib/src/Components/Map/UtopiaMapInner.tsx

@@ -51,6 +51,7 @@ export function UtopiaMapInner({
   showFilterControl = false,
   showGratitudeControl = false,
   showLayerControl = true,
+  showZoomControl = false,
   showThemeControl = false,
   defaultTheme = '',
   donationWidget,
@@ -63,6 +64,7 @@ export function UtopiaMapInner({
   showFilterControl?: boolean
   showLayerControl?: boolean
   showGratitudeControl?: boolean
+  showZoomControl?: boolean
   donationWidget?: boolean
   showThemeControl?: boolean
   defaultTheme?: string
@@ -271,11 +273,11 @@ export function UtopiaMapInner({
   return (
     <div className={`tw:h-full ${selectNewItemPosition != null ? 'crosshair-cursor-enabled' : ''}`}>
       <Outlet />
-      <Control position='topLeft' zIndex='1000' absolute>
+      <Control position='topLeft' zIndex='1000' absolute showZoomControl={showZoomControl}>
         <SearchControl />
         <TagsControl />
       </Control>
-      <Control position='bottomLeft' zIndex='999' absolute>
+      <Control position='bottomLeft' zIndex='999' absolute showZoomControl={showZoomControl}>
         {showFilterControl && <FilterControl />}
         {showLayerControl && <LayerControl expandLayerControl={expandLayerControl ?? false} />}
         {showGratitudeControl && <GratitudeControl />}