k1nq/TREK
1
0
Fork 0
mirror of https://github.com/mauriceboe/TREK.git synced 2026-06-21 14:21:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(plan): keep mobile plan panel open when opening day details

Browse Source 
On mobile, tapping a day's title bar opened the day-detail view but also closed
the plan sidebar, forcing users to reopen it every time. The sidebar was closed
because the day-detail panel (z-50) would otherwise sit behind the mobile
sidebar overlay (z-9999). Lift the panel above the overlay on mobile and stop
closing the sidebar so the plan stays visible.

Closes #1015
This commit is contained in:
Maurice
2026-05-25 00:44:16 +02:00
parent 0bdbf03dd1
commit ee1e80409d
2 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Planner/DayDetailPanel.tsx
+3 -2
View File
@@ -58,9 +58,10 @@ interface DayDetailPanelProps {
rightWidth?: number
collapsed?: boolean
onToggleCollapse?: () => void
mobile?: boolean
}
export default function DayDetailPanel({ day, days, places, categories = [], tripId, assignments, reservations = [], lat, lng, onClose, onAccommodationChange, leftWidth = 0, rightWidth = 0, collapsed: collapsedProp = false, onToggleCollapse }: DayDetailPanelProps) {
export default function DayDetailPanel({ day, days, places, categories = [], tripId, assignments, reservations = [], lat, lng, onClose, onAccommodationChange, leftWidth = 0, rightWidth = 0, collapsed: collapsedProp = false, onToggleCollapse, mobile = false }: DayDetailPanelProps) {
const { t, language, locale } = useTranslation()
const can = useCanDo()
const tripObj = useTripStore((s) => s.trip)
@@ -174,7 +175,7 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
const font = { fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }
return (
<div className="fixed z-50" style={{ bottom: 'calc(var(--bottom-nav-h) + 20px)', left: `calc(${leftWidth}px + (100vw - ${leftWidth}px - ${rightWidth}px) / 2)`, transform: 'translateX(-50%)', width: `min(800px, calc(100vw - ${leftWidth}px - ${rightWidth}px - 32px))`, ...font }}>
<div className="fixed z-50" style={{ bottom: 'calc(var(--bottom-nav-h) + 20px)', left: `calc(${leftWidth}px + (100vw - ${leftWidth}px - ${rightWidth}px) / 2)`, transform: 'translateX(-50%)', width: `min(800px, calc(100vw - ${leftWidth}px - ${rightWidth}px - 32px))`, ...(mobile ? { zIndex: 10000 } : null), ...font }}>
<div style={{
background: 'var(--bg-elevated)',
backdropFilter: 'blur(40px) saturate(180%)',