antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix filter tags overlapping zoom control by adjusting positioning

Browse Source 
Co-authored-by: antontranelis <31516529+antontranelis@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot] 2025-09-07 10:06:04 +00:00
parent f60b484cc4
commit f27044ea41
3 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
lib/src/Components/Map/Subcomponents/Controls/Control.tsx
View File

@ -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>

1
lib/src/Components/Map/UtopiaMap.tsx
View File

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

6
lib/src/Components/Map/UtopiaMapInner.tsx
View File

@ -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 />}