diff --git a/src/components/AppDatePicker.vue b/src/components/AppDatePicker.vue index 9ddf795..b5ad009 100644 --- a/src/components/AppDatePicker.vue +++ b/src/components/AppDatePicker.vue @@ -122,24 +122,34 @@ const dayCells = computed(() => { const dayHeaders = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'] // ── Positioning ───────────────────────────────────────────────────── +function getZoomFactor(): number { + const app = document.getElementById('app') + if (!app) return 1 + const zoom = (app.style as any).zoom + return zoom ? parseFloat(zoom) / 100 : 1 +} + function updatePosition() { if (!triggerRef.value) return const rect = triggerRef.value.getBoundingClientRect() + const zoom = getZoomFactor() const panelWidth = 280 + const renderedWidth = panelWidth * zoom - let left = rect.left - // Shift left if it would overflow the viewport right edge - if (left + panelWidth > window.innerWidth) { - left = window.innerWidth - panelWidth - 8 + // Compute left in viewport space, then convert to panel's zoomed coordinate space + let leftViewport = rect.left + if (leftViewport + renderedWidth > window.innerWidth) { + leftViewport = window.innerWidth - renderedWidth - 8 } - if (left < 0) left = 0 + if (leftViewport < 0) leftViewport = 0 panelStyle.value = { position: 'fixed', - top: `${rect.bottom + 4}px`, - left: `${left}px`, + top: `${(rect.bottom + 4) / zoom}px`, + left: `${leftViewport / zoom}px`, width: `${panelWidth}px`, zIndex: '9999', + zoom: `${zoom * 100}%`, } } diff --git a/src/components/AppSelect.vue b/src/components/AppSelect.vue index 30b9a28..48af91c 100644 --- a/src/components/AppSelect.vue +++ b/src/components/AppSelect.vue @@ -64,15 +64,24 @@ function isSelected(item: any): boolean { return val === props.modelValue } +function getZoomFactor(): number { + const app = document.getElementById('app') + if (!app) return 1 + const zoom = (app.style as any).zoom + return zoom ? parseFloat(zoom) / 100 : 1 +} + function updatePosition() { if (!triggerRef.value) return const rect = triggerRef.value.getBoundingClientRect() + const zoom = getZoomFactor() panelStyle.value = { position: 'fixed', - top: `${rect.bottom + 4}px`, - left: `${rect.left}px`, - width: `${rect.width}px`, + top: `${(rect.bottom + 4) / zoom}px`, + left: `${rect.left / zoom}px`, + width: `${rect.width / zoom}px`, zIndex: '9999', + zoom: `${zoom * 100}%`, } }