diff --git a/src/components/ContextMenu/index.tsx b/src/components/ContextMenu/index.tsx index d09e0e60ec..0f374e6637 100644 --- a/src/components/ContextMenu/index.tsx +++ b/src/components/ContextMenu/index.tsx @@ -530,7 +530,7 @@ export function AuxiliaryView({ transform: [ { translateY: - (ensureOnScreenTranslationSV.get() || translationSV.get()) * + Math.max(ensureOnScreenTranslationSV.get(), translationSV.get()) * animationSV.get(), }, {scale: interpolate(animationSV.get(), [0, 1], [0.2, 1])}, @@ -544,21 +544,17 @@ export function AuxiliaryView({ const onLayout = useCallback(() => { if (!measurement) return - let translation = 0 - // vibes based, just assuming it'll fit within this space. revisit if we use // AuxiliaryView for something tall const TOP_INSET = topInset + 80 const distanceMessageFromTop = measurement.y - TOP_INSET - if (distanceMessageFromTop < 0) { - translation = -distanceMessageFromTop - } + const minimumTranslation = -distanceMessageFromTop // normally, the context menu is responsible for measuring itself and moving everything into the right place // however, in auxiliary-only mode, that doesn't happen, so we need to do it ourselves here if (mode === 'auxiliary-only') { - translationSV.set(translation) + translationSV.set(Math.max(minimumTranslation, 0)) ensureOnScreenTranslationSV.set(0) } // however, we also need to make sure that for super tall triggers, we don't go off the screen @@ -567,7 +563,7 @@ export function AuxiliaryView({ // we'll just have to live with it for now, fixing it would be possible but be a large complexity // increase for an edge case else { - ensureOnScreenTranslationSV.set(translation) + ensureOnScreenTranslationSV.set(minimumTranslation) } }, [mode, measurement, translationSV, topInset, ensureOnScreenTranslationSV])