fix(lib): align zoom-control and tags (#427)

This commit is contained in:
Anton Tranelis 2025-11-11 15:14:59 +01:00 committed by GitHub
parent 462d9056f4
commit 5cf49cfcd3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 7 additions and 2 deletions

View File

@ -6,7 +6,7 @@ export const TagsControl = () => {
const removeFilterTag = useRemoveFilterTag() const removeFilterTag = useRemoveFilterTag()
return ( 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) => ( {filterTags.map((tag) => (
<div <div
key={tag.id} key={tag.id}

View File

@ -133,6 +133,7 @@ function UtopiaMap({
maplibreStyle={maplibreStyle} maplibreStyle={maplibreStyle}
zoomOffset={zoomOffset} zoomOffset={zoomOffset}
tileSize={tileSize} tileSize={tileSize}
showZoomControl={showZoomControl}
> >
{children} {children}
</UtopiaMapInner> </UtopiaMapInner>

View File

@ -64,6 +64,7 @@ export function UtopiaMapInner({
maplibreStyle, maplibreStyle,
zoomOffset = 0, zoomOffset = 0,
tileSize = 256, tileSize = 256,
showZoomControl,
}: { }: {
children?: React.ReactNode children?: React.ReactNode
geo?: GeoJsonObject geo?: GeoJsonObject
@ -81,6 +82,7 @@ export function UtopiaMapInner({
maplibreStyle?: string maplibreStyle?: string
zoomOffset?: number zoomOffset?: number
tileSize?: number tileSize?: number
showZoomControl?: boolean
}) { }) {
const selectNewItemPosition = useSelectPosition() const selectNewItemPosition = useSelectPosition()
const setSelectNewItemPosition = useSetSelectPosition() const setSelectNewItemPosition = useSetSelectPosition()
@ -285,7 +287,9 @@ export function UtopiaMapInner({
<Outlet /> <Outlet />
<Control position='topLeft' zIndex='1000' absolute> <Control position='topLeft' zIndex='1000' absolute>
<SearchControl /> <SearchControl />
<TagsControl /> <div className={`${showZoomControl ? 'tw:pl-14' : ''}`}>
<TagsControl />
</div>
</Control> </Control>
<Control position='bottomLeft' zIndex='999' absolute> <Control position='bottomLeft' zIndex='999' absolute>
{showFullscreenControl && <FullscreenControl />} {showFullscreenControl && <FullscreenControl />}