chore(release): 4.52.2 [skip ci]

## [4.52.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.52.1...v4.52.2) (2025-10-20)

### Bug Fixes

* **homepage:** use actual container dimensions for flashcard positioning ([4082a24](4082a246a3))

CHANGELOG.md

@@ -1,3 +1,17 @@
+## [4.52.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.52.1...v4.52.2) (2025-10-20)
+
+
+### Bug Fixes
+
+* **homepage:** use actual container dimensions for flashcard positioning ([4082a24](https://github.com/antialias/soroban-abacus-flashcards/commit/4082a246a33ea67617b762d5b7490a8c9af0ad49))
+
+## [4.52.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.52.0...v4.52.1) (2025-10-20)
+
+
+### Bug Fixes
+
+* **homepage:** correct flashcard transform rendering ([5dc636a](https://github.com/antialias/soroban-abacus-flashcards/commit/5dc636a71c15db28c029fd4f60e4a6c95620f953))
+
 ## [4.52.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.51.0...v4.52.0) (2025-10-20)
 
 

apps/web/src/components/InteractiveFlashcards.tsx

@@ -2,8 +2,8 @@
 
 import { AbacusReact } from '@soroban/abacus-react'
 import { useDrag } from '@use-gesture/react'
-import { useEffect, useState } from 'react'
-import { animated, config, useSpring } from '@react-spring/web'
+import { useEffect, useRef, useState } from 'react'
+import { animated, config, to, useSpring } from '@react-spring/web'
 import { css } from '../../styled-system/css'
 
 interface Flashcard {
@@ -15,27 +15,35 @@ interface Flashcard {
   zIndex: number
 }
 
-const CONTAINER_WIDTH = 800
-const CONTAINER_HEIGHT = 500
-
 /**
  * InteractiveFlashcards - A fun, physics-based flashcard display
  * Users can drag and throw flashcards around with realistic momentum
  */
 export function InteractiveFlashcards() {
+  const containerRef = useRef<HTMLDivElement>(null)
   // Generate 8-15 random flashcards (client-side only to avoid hydration errors)
   const [cards, setCards] = useState<Flashcard[]>([])
 
   useEffect(() => {
+    // Wait for container to mount and get actual dimensions
+    if (!containerRef.current) return
+
+    const containerWidth = containerRef.current.offsetWidth
+    const containerHeight = containerRef.current.offsetHeight
+
     const count = Math.floor(Math.random() * 8) + 8 // 8-15 cards
     const generated: Flashcard[] = []
 
+    // Position cards within the actual container bounds
+    const cardWidth = 120 // approximate card width
+    const cardHeight = 200 // approximate card height
+
     for (let i = 0; i < count; i++) {
       generated.push({
         id: i,
         number: Math.floor(Math.random() * 900) + 100, // 100-999
-        initialX: Math.random() * (CONTAINER_WIDTH - 200) + 100,
-        initialY: Math.random() * (CONTAINER_HEIGHT - 200) + 100,
+        initialX: Math.random() * (containerWidth - cardWidth - 40) + 20,
+        initialY: Math.random() * (containerHeight - cardHeight - 40) + 20,
         initialRotation: Math.random() * 40 - 20, // -20 to 20 degrees
         zIndex: i,
       })
@@ -46,6 +54,7 @@ export function InteractiveFlashcards() {
 
   return (
     <div
+      ref={containerRef}
       className={css({
         position: 'relative',
         width: '100%',
@@ -130,12 +139,14 @@ function DraggableCard({ card }: DraggableCardProps) {
     <animated.div
       {...bind()}
       style={{
-        x,
-        y,
-        rotation,
-        scale,
-        zIndex,
         position: 'absolute',
+        left: 0,
+        top: 0,
+        transform: to(
+          [x, y, rotation, scale],
+          (x, y, r, s) => `translate(${x}px, ${y}px) rotate(${r}deg) scale(${s})`
+        ),
+        zIndex,
         touchAction: 'none',
         cursor: 'grab',
       }}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "soroban-monorepo",
-  "version": "4.52.0",
+  "version": "4.52.2",
   "private": true,
   "description": "Beautiful Soroban Flashcard Generator - Monorepo",
   "workspaces": [