antialias
/
soroban-abacus-flashcards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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.
This commit is contained in:
Thomas Hallock 2025-11-12 13:17:03 -06:00
parent fc1d7fcbd6
commit 00b0fb297b
1 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
apps/web/src/app/create/worksheets/components/MobileSettingsButton.tsx
View File

@ -36,8 +36,8 @@ export function MobileSettingsButton({ config, onClick }: MobileSettingsButtonPr
} else { } else {
// Default position: below nav and action button // Default position: below nav and action button
const navHeight = 60 // Approximate --app-nav-height const navHeight = 60 // Approximate --app-nav-height
const actionButtonHeight = 48 // Approximate height of download/action button const actionButtonArea = 80 // Generous estimate including padding
setPosition({ x: MARGIN, y: navHeight + actionButtonHeight + MARGIN }) setPosition({ x: MARGIN, y: navHeight + actionButtonArea })
} }
}, []) }, [])
@ -52,10 +52,22 @@ export function MobileSettingsButton({ config, onClick }: MobileSettingsButtonPr
const rect = buttonRef.current.getBoundingClientRect() const rect = buttonRef.current.getBoundingClientRect()
// Calculate bounds // Calculate bounds - need to stay below the download/action button
const navHeight = 60 // Approximate --app-nav-height // Try to find the actual action button element to get its real height
const actionButtonHeight = 48 // Approximate height of download/action button const actionButton = document.querySelector('[data-action="generate-worksheet"]')
const minY = navHeight + actionButtonHeight + MARGIN // Don't go above action button 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 maxX = window.innerWidth - rect.width - MARGIN
const maxY = window.innerHeight - rect.height - MARGIN const maxY = window.innerHeight - rect.height - MARGIN