fix: make placeholder pages match actual page dimensions

Update PagePlaceholder to match the actual worksheet page size:

**Changes**
- Add orientation prop to PagePlaceholder (portrait/landscape)
- Use CSS aspect-ratio to match 8.5" × 11" pages
- Portrait: aspect ratio 1:1.294 (8.5:11)
- Landscape: aspect ratio 1.294:1 (11:8.5)
- Replace minHeight with width: 100% + aspectRatio
- Remove minHeight from page container
- Pass orientation from formState to placeholder

**Benefits**
- No layout shift when pages load
- Placeholders are exactly the same size as loaded pages
- Proper aspect ratio for both portrait and landscape
- Maintains scroll position during lazy loading

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

apps/web/src/app/create/worksheets/components/PagePlaceholder.tsx

@@ -5,12 +5,18 @@ import { useTheme } from '@/contexts/ThemeContext'
 
 interface PagePlaceholderProps {
   pageNumber: number
+  orientation?: 'portrait' | 'landscape'
 }
 
-export function PagePlaceholder({ pageNumber }: PagePlaceholderProps) {
+export function PagePlaceholder({ pageNumber, orientation = 'portrait' }: PagePlaceholderProps) {
   const { resolvedTheme } = useTheme()
   const isDark = resolvedTheme === 'dark'
 
+  // Match the aspect ratio of actual worksheet pages
+  // Portrait: 8.5" × 11" (aspect ratio 1:1.294)
+  // Landscape: 11" × 8.5" (aspect ratio 1.294:1)
+  const aspectRatio = orientation === 'portrait' ? 11 / 8.5 : 8.5 / 11
+
   return (
     <div
       data-component="page-placeholder"
@@ -20,7 +26,8 @@ export function PagePlaceholder({ pageNumber }: PagePlaceholderProps) {
         border: '2px dashed',
         borderColor: isDark ? 'gray.600' : 'gray.300',
         rounded: 'lg',
-        minHeight: '800px',
+        width: '100%',
+        aspectRatio: `1 / ${aspectRatio}`,
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',

apps/web/src/app/create/worksheets/components/WorksheetPreview.tsx

@@ -422,8 +422,7 @@ function PreviewContent({ formState, initialData, isScrolling = false }: Workshe
               className={css({
                 display: 'flex',
                 justifyContent: 'center',
-                alignItems: 'center',
+                alignItems: 'flex-start',
-                minHeight: '800px', // Prevent layout shift
               })}
             >
               {isLoaded && page ? (
@@ -469,7 +468,7 @@ function PreviewContent({ formState, initialData, isScrolling = false }: Workshe
                   </p>
                 </div>
               ) : (
-                <PagePlaceholder pageNumber={index + 1} />
+                <PagePlaceholder pageNumber={index + 1} orientation={formState.orientation} />
               )}
             </div>
           )