refactor(planner): each card over the map sets its own left side again, where the reading direction check counts it

This commit is contained in:
Maurice
2026-10-12 21:14:28 +00:00
parent 8f6dab30a2
commit 8832632b4e
5 changed files with 28 additions and 18 deletions
@@ -27,7 +27,7 @@ import { BOX, Eyebrow, Field, RoundAction, TypeTile, toneOf, toneColor, toneTint
import { SoftPill, TimePill, tintOf } from './planParts'
import { typeInfo } from './bookings/bookingsModel'
import { weatherIconFor } from '../Weather/weatherIcons'
import { centredMapCardBox } from '../Map/centredMapCard'
import { centredMapCard } from '../Map/centredMapCard'
function WIcon({ main, size = 14 }: { main: string; size?: number }) {
const Icon = weatherIconFor(main)
@@ -162,9 +162,10 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
setShowHotelPicker('edit')
}
const removeAccommodation = (acc: Accommodation) => { handleRemoveAccommodation(acc).catch(showError) }
const mapCard = centredMapCard(leftWidth, rightWidth, { extent: '100vw', clearPill: !mobile })
return (
<div className="fixed z-50" style={{ bottom: 'calc(var(--bottom-nav-h) + 20px)', transform: 'translateX(-50%)', ...centredMapCardBox(leftWidth, rightWidth, { extent: '100vw', clearPill: !mobile }), ...(mobile ? { zIndex: 10000 } : null), fontFamily: 'var(--font-system)' }}>
<div className="fixed z-50" style={{ bottom: 'calc(var(--bottom-nav-h) + 20px)', left: mapCard.centre, transform: 'translateX(-50%)', width: mapCard.width, ...(mobile ? { zIndex: 10000 } : null), fontFamily: 'var(--font-system)' }}>
<div ref={cardRef}
className="flex flex-col overflow-hidden rounded-[20px] border border-edge-faint bg-surface-elevated shadow-popover backdrop-blur-[40px] backdrop-saturate-[1.8]"
style={{ maxHeight: collapsed ? 'none' : '60vh' }}>
@@ -38,7 +38,7 @@ import { formatDistance, formatElevation } from '../../utils/units'
import { navigationTargetLabel, getNavigationTargets, openNavigationTarget } from './placeNavigation'
import { TRANSPORT_TYPES, getPlaceBookings } from '../../utils/dayMerge'
import { NavigationMenu } from '../shared/NavigationMenu'
import { centredMapCardBox } from '../Map/centredMapCard'
import { centredMapCard } from '../Map/centredMapCard'
import { resolveOpenNow, resolvePlaceTimeZone, getWeekdayIndex, type OpeningPeriod } from './placeOpenState'
import { convertHoursLine } from './placeHoursFormat'
import type { EndDayControlProps } from '../Roadtrip/EndDayControl'
@@ -370,13 +370,16 @@ export default function PlaceInspector({
const phone = place.phone || googleDetails?.phone
const description = place.description || googleDetails?.summary
const showRating = (mode === 'trip' && !!onRate) || !!shortReview
const mapCard = centredMapCard(leftWidth, rightWidth, { clearPill: clearMapPill })
return (
<div
style={{
position: 'absolute',
bottom: 20,
...centredMapCardBox(leftWidth, rightWidth, { clearPill: clearMapPill }), transform: 'translateX(-50%)',
left: mapCard.centre,
transform: 'translateX(-50%)',
width: mapCard.width,
zIndex: 50,
fontFamily: 'var(--font-system)',
}}