diff --git a/src/components/cards/cards.jsx b/src/components/cards/cards.jsx index 975a050fd..017967512 100644 --- a/src/components/cards/cards.jsx +++ b/src/components/cards/cards.jsx @@ -264,24 +264,35 @@ const Cards = props => { if (activeDeckId === null) return; + // Tutorial cards need to calculate their own dragging bounds + // to allow for dragging the cards off the left, right and bottom + // edges of the workspace, used in the custom overlay 'card-container-overlay' + const cardHorizontalOffset = 400; // 80% of approx. card width + const cardVerticalOffset = 256; // 80% of approx. card height + const menuBarHeight = 48; // TODO: get pre-calculated from elsewhere? + if (x === 0 && y === 0) { // initialize positions x = isRtl ? -292 : 292; - // The tallest cards are about 385px high, and the default position is pinned + x += cardHorizontalOffset; + // The tallest cards are about 320px high, and the default position is pinned // to near the bottom of the blocks palette to allow room to work above. - const tallCardHeight = 385; + const tallCardHeight = 320; const bottomMargin = 60; // To avoid overlapping the backpack region - y = window.innerHeight - tallCardHeight - bottomMargin; + y = window.innerHeight - tallCardHeight - bottomMargin - menuBarHeight; } const steps = content[activeDeckId].steps; return ( + // Use a custom overlay to act as the bounding parent for the draggable