cv-site/tests/mjs/50-landscape-layout-check.mjs

#!/usr/bin/env node

import { chromium } from 'playwright';

const LANDSCAPE = { width: 844, height: 390 }; // iPhone 14 Pro landscape

(async () => {
    const browser = await chromium.launch({ headless: true });
    const context = await browser.newContext({ viewport: LANDSCAPE });
    const page = await context.newPage();

    console.log('📱 Checking iPhone Landscape Layout\n');

    await page.goto('http://localhost:1999/?lang=en&view=extended');
    await page.waitForLoadState('networkidle');

    // Check key layout elements
    const pageContent = await page.locator('.page-content').first();
    const sidebar = await page.locator('.cv-sidebar').first();
    const cvMain = await page.locator('.cv-main').first();

    const pageContentStyles = await pageContent.evaluate(el => {
        const computed = window.getComputedStyle(el);
        return {
            display: computed.display,
            gridTemplateColumns: computed.gridTemplateColumns
        };
    });

    const sidebarStyles = await sidebar.evaluate(el => {
        const computed = window.getComputedStyle(el);
        return {
            display: computed.display,
            width: computed.width
        };
    });

    const mainStyles = await cvMain.evaluate(el => {
        const computed = window.getComputedStyle(el);
        return {
            display: computed.display,
            width: computed.width
        };
    });

    console.log('📊 Layout Analysis:\n');
    console.log('Page Content:');
    console.log(`  • Display: ${pageContentStyles.display}`);
    console.log(`  • Grid Template Columns: ${pageContentStyles.gridTemplateColumns}`);
    console.log(`  • Expected: Should be single column (1fr) on mobile\n`);

    console.log('Sidebar:');
    console.log(`  • Display: ${sidebarStyles.display}`);
    console.log(`  • Width: ${sidebarStyles.width}\n`);

    console.log('Main Content:');
    console.log(`  • Display: ${mainStyles.display}`);
    console.log(`  • Width: ${mainStyles.width}\n`);

    // Check if it's a 2-column layout (wrong) or 1-column (correct)
    const isTwoColumn = pageContentStyles.gridTemplateColumns &&
                        pageContentStyles.gridTemplateColumns.includes('minmax');

    console.log(`Layout Type: ${isTwoColumn ? '❌ TWO COLUMNS (WRONG)' : '✅ SINGLE COLUMN (CORRECT)'}\n`);

    await page.screenshot({
        path: 'tests/screenshots/landscape-layout-detailed.png',
        fullPage: true
    });
    console.log('📸 Screenshot: tests/screenshots/landscape-layout-detailed.png\n');

    await browser.close();
})();