cv-site/tests/mjs/62-sidebar-computed-height-debug.mjs

#!/usr/bin/env node

import { chromium } from 'playwright';

const LANDSCAPE_VIEWPORT = { width: 667, height: 375 };

(async () => {
    const browser = await chromium.launch({ headless: true });
    const context = await browser.newContext({
        viewport: LANDSCAPE_VIEWPORT,
        userAgent: 'Mozilla/5.0 (Linux; Android 11; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.91 Mobile Safari/537.36',
        hasTouch: true
    });
    const page = await context.newPage();

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

    // Take a screenshot to see what's visible
    await page.screenshot({
        path: 'tests/screenshots/sidebar-debug-landscape.png',
        fullPage: true
    });

    const details = await page.evaluate(() => {
        const sidebar = document.querySelector('.cv-sidebar-left');
        const accordion = document.querySelector('.sidebar-accordion');

        // Get all children of sidebar
        const sidebarChildren = Array.from(sidebar.children).map(child => ({
            tag: child.tagName,
            class: child.className,
            height: Math.round(child.getBoundingClientRect().height),
            display: window.getComputedStyle(child).display,
            position: window.getComputedStyle(child).position
        }));

        // Get all children of accordion
        const accordionChildren = Array.from(accordion.children).map(child => ({
            tag: child.tagName,
            class: child.className,
            height: Math.round(child.getBoundingClientRect().height),
            display: window.getComputedStyle(child).display
        }));

        // Check if there's a min-height or explicit height
        const sidebarStyles = window.getComputedStyle(sidebar);

        return {
            sidebarChildren,
            accordionChildren,
            sidebarStyles: {
                height: sidebarStyles.height,
                minHeight: sidebarStyles.minHeight,
                maxHeight: sidebarStyles.maxHeight,
                boxSizing: sidebarStyles.boxSizing,
                padding: sidebarStyles.padding,
            }
        };
    });

    console.log('Sidebar Children:');
    details.sidebarChildren.forEach((child, i) => {
        console.log(`  ${i + 1}. <${child.tag}> .${child.class}`);
        console.log(`     Height: ${child.height}px, Display: ${child.display}, Position: ${child.position}`);
    });

    console.log('\nAccordion Children:');
    details.accordionChildren.forEach((child, i) => {
        console.log(`  ${i + 1}. <${child.tag}> .${child.class}`);
        console.log(`     Height: ${child.height}px, Display: ${child.display}`);
    });

    console.log('\nSidebar Computed Styles:');
    console.log(`  • height: ${details.sidebarStyles.height}`);
    console.log(`  • min-height: ${details.sidebarStyles.minHeight}`);
    console.log(`  • max-height: ${details.sidebarStyles.maxHeight}`);
    console.log(`  • box-sizing: ${details.sidebarStyles.boxSizing}`);
    console.log(`  • padding: ${details.sidebarStyles.padding}`);

    console.log('\nScreenshot saved to: tests/screenshots/sidebar-debug-landscape.png');

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