From 9a81baa809dc27bfe11f4afa39b4b56490cd8222 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A9rnyi=20M=C3=A1rk?= Date: Mon, 30 Mar 2026 00:44:28 +0200 Subject: [PATCH 1/4] feat: add leftWidth/rightWidth layout props to DayDetailPanel --- client/src/components/Planner/DayDetailPanel.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/client/src/components/Planner/DayDetailPanel.tsx b/client/src/components/Planner/DayDetailPanel.tsx index d36cba9..5449a57 100644 --- a/client/src/components/Planner/DayDetailPanel.tsx +++ b/client/src/components/Planner/DayDetailPanel.tsx @@ -50,9 +50,11 @@ interface DayDetailPanelProps { lng: number | null onClose: () => void onAccommodationChange: () => void + leftWidth?: number + rightWidth?: number } -export default function DayDetailPanel({ day, days, places, categories = [], tripId, assignments, reservations = [], lat, lng, onClose, onAccommodationChange }: DayDetailPanelProps) { +export default function DayDetailPanel({ day, days, places, categories = [], tripId, assignments, reservations = [], lat, lng, onClose, onAccommodationChange, leftWidth = 0, rightWidth = 0 }: DayDetailPanelProps) { const { t, language, locale } = useTranslation() const isFahrenheit = useSettingsStore(s => s.settings.temperature_unit) === 'fahrenheit' const is12h = useSettingsStore(s => s.settings.time_format) === '12h' From 1e20f024d5c8527b6261edca62b4649f68abc546 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A9rnyi=20M=C3=A1rk?= Date: Mon, 30 Mar 2026 00:46:06 +0200 Subject: [PATCH 2/4] use leftWidth/rightWidth to center panel between sidebars --- client/src/components/Planner/DayDetailPanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/Planner/DayDetailPanel.tsx b/client/src/components/Planner/DayDetailPanel.tsx index 5449a57..f78b27d 100644 --- a/client/src/components/Planner/DayDetailPanel.tsx +++ b/client/src/components/Planner/DayDetailPanel.tsx @@ -148,7 +148,7 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri const font = { fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" } return ( -
+
Date: Mon, 30 Mar 2026 00:52:41 +0200 Subject: [PATCH 3/4] pass leftWidth/rightWidth from TripPlannerPage to DayDetailPanel --- client/src/pages/TripPlannerPage.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/client/src/pages/TripPlannerPage.tsx b/client/src/pages/TripPlannerPage.tsx index de659f8..6a9c4d7 100644 --- a/client/src/pages/TripPlannerPage.tsx +++ b/client/src/pages/TripPlannerPage.tsx @@ -542,6 +542,8 @@ export default function TripPlannerPage(): React.ReactElement | null { lng={geoPlace?.lng} onClose={() => setShowDayDetail(null)} onAccommodationChange={loadAccommodations} + leftWidth={leftCollapsed ? 0 : leftWidth} + rightWidth={rightCollapsed ? 0 : rightWidth} /> ) })()} From 66b00c24e282c29124028c4be889e6cf65c01da0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A9rnyi=20M=C3=A1rk?= Date: Mon, 30 Mar 2026 11:15:57 +0200 Subject: [PATCH 4/4] add leftWidth/rightWidth centering to PlaceInspector --- client/src/components/Planner/PlaceInspector.tsx | 7 +++++-- client/src/pages/TripPlannerPage.tsx | 2 ++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/client/src/components/Planner/PlaceInspector.tsx b/client/src/components/Planner/PlaceInspector.tsx index 7d46a7c..766ce0a 100644 --- a/client/src/components/Planner/PlaceInspector.tsx +++ b/client/src/components/Planner/PlaceInspector.tsx @@ -120,12 +120,15 @@ interface PlaceInspectorProps { tripMembers?: TripMember[] onSetParticipants: (assignmentId: number, dayId: number, participantIds: number[]) => void onUpdatePlace: (placeId: number, data: Partial) => void + leftWidth?: number + rightWidth?: number } export default function PlaceInspector({ place, categories, days, selectedDayId, selectedAssignmentId, assignments, reservations = [], onClose, onEdit, onDelete, onAssignToDay, onRemoveAssignment, files, onFileUpload, tripMembers = [], onSetParticipants, onUpdatePlace, + leftWidth = 0, rightWidth = 0, }: PlaceInspectorProps) { const { t, locale, language } = useTranslation() const timeFormat = useSettingsStore(s => s.settings.time_format) || '24h' @@ -196,9 +199,9 @@ export default function PlaceInspector({ style={{ position: 'absolute', bottom: 20, - left: '50%', + left: `calc(${leftWidth}px + (100% - ${leftWidth}px - ${rightWidth}px) / 2)`, transform: 'translateX(-50%)', - width: 'min(800px, calc(100vw - 32px))', + width: `min(800px, calc(100% - ${leftWidth}px - ${rightWidth}px - 32px))`, zIndex: 50, fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif", }} diff --git a/client/src/pages/TripPlannerPage.tsx b/client/src/pages/TripPlannerPage.tsx index 6a9c4d7..8e0ca9e 100644 --- a/client/src/pages/TripPlannerPage.tsx +++ b/client/src/pages/TripPlannerPage.tsx @@ -590,6 +590,8 @@ export default function TripPlannerPage(): React.ReactElement | null { } catch {} }} onUpdatePlace={async (placeId, data) => { try { await tripStore.updatePlace(tripId, placeId, data) } catch (err: unknown) { toast.error(err instanceof Error ? err.message : 'Unknown error') } }} + leftWidth={leftCollapsed ? 0 : leftWidth} + rightWidth={rightCollapsed ? 0 : rightWidth} /> )}