From 00b0fb297bf7bc72648ee672f6ce6f0c4cadd28f Mon Sep 17 00:00:00 2001 From: Thomas Hallock Date: Wed, 12 Nov 2025 13:17:03 -0600 Subject: [PATCH] fix: improve draggable button constraints to avoid action button overlap Query actual action button position to calculate safe dragging bounds. Increased fallback estimate from 48px to 80px for better clearance. Button now properly stays below download/action button. --- .../components/MobileSettingsButton.tsx | 24 ++++++++++++++----- 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/apps/web/src/app/create/worksheets/components/MobileSettingsButton.tsx b/apps/web/src/app/create/worksheets/components/MobileSettingsButton.tsx index 2d7ba495..694ac80f 100644 --- a/apps/web/src/app/create/worksheets/components/MobileSettingsButton.tsx +++ b/apps/web/src/app/create/worksheets/components/MobileSettingsButton.tsx @@ -36,8 +36,8 @@ export function MobileSettingsButton({ config, onClick }: MobileSettingsButtonPr } else { // Default position: below nav and action button const navHeight = 60 // Approximate --app-nav-height - const actionButtonHeight = 48 // Approximate height of download/action button - setPosition({ x: MARGIN, y: navHeight + actionButtonHeight + MARGIN }) + const actionButtonArea = 80 // Generous estimate including padding + setPosition({ x: MARGIN, y: navHeight + actionButtonArea }) } }, []) @@ -52,10 +52,22 @@ export function MobileSettingsButton({ config, onClick }: MobileSettingsButtonPr const rect = buttonRef.current.getBoundingClientRect() - // Calculate bounds - const navHeight = 60 // Approximate --app-nav-height - const actionButtonHeight = 48 // Approximate height of download/action button - const minY = navHeight + actionButtonHeight + MARGIN // Don't go above action button + // Calculate bounds - need to stay below the download/action button + // Try to find the actual action button element to get its real height + const actionButton = document.querySelector('[data-action="generate-worksheet"]') + let actionButtonBottom = 0 + + if (actionButton) { + const actionRect = actionButton.getBoundingClientRect() + actionButtonBottom = actionRect.bottom + MARGIN + } else { + // Fallback: estimate based on nav height + action button area + const navHeight = 60 // Approximate --app-nav-height + const actionButtonArea = 80 // More generous estimate including padding + actionButtonBottom = navHeight + actionButtonArea + } + + const minY = actionButtonBottom const maxX = window.innerWidth - rect.width - MARGIN const maxY = window.innerHeight - rect.height - MARGIN