cv-site/tests/mjs/61-sidebar-positioning-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');

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

        return {
            sidebar: {
                position: window.getComputedStyle(sidebar).position,
                overflow: window.getComputedStyle(sidebar).overflow,
                overflowY: window.getComputedStyle(sidebar).overflowY,
                height: window.getComputedStyle(sidebar).height,
                maxHeight: window.getComputedStyle(sidebar).maxHeight,
            },
            accordion: {
                position: window.getComputedStyle(accordion).position,
                display: window.getComputedStyle(accordion).display,
                overflow: window.getComputedStyle(accordion).overflow,
                height: window.getComputedStyle(accordion).height,
                maxHeight: window.getComputedStyle(accordion).maxHeight,
            },
            content: {
                position: window.getComputedStyle(content).position,
                display: window.getComputedStyle(content).display,
                overflow: window.getComputedStyle(content).overflow,
                height: window.getComputedStyle(content).height,
                maxHeight: window.getComputedStyle(content).maxHeight,
                top: window.getComputedStyle(content).top,
                left: window.getComputedStyle(content).left,
            }
        };
    });

    console.log('Positioning Debug:\n');
    console.log('Sidebar (.cv-sidebar-left):');
    console.log(`  • position: ${positioning.sidebar.position}`);
    console.log(`  • overflow: ${positioning.sidebar.overflow}`);
    console.log(`  • overflowY: ${positioning.sidebar.overflowY}`);
    console.log(`  • height: ${positioning.sidebar.height}`);
    console.log(`  • max-height: ${positioning.sidebar.maxHeight}\n`);

    console.log('Accordion (.sidebar-accordion):');
    console.log(`  • position: ${positioning.accordion.position}`);
    console.log(`  • display: ${positioning.accordion.display}`);
    console.log(`  • overflow: ${positioning.accordion.overflow}`);
    console.log(`  • height: ${positioning.accordion.height}`);
    console.log(`  • max-height: ${positioning.accordion.maxHeight}\n`);

    console.log('Content (.sidebar-accordion-content):');
    console.log(`  • position: ${positioning.content.position}`);
    console.log(`  • display: ${positioning.content.display}`);
    console.log(`  • overflow: ${positioning.content.overflow}`);
    console.log(`  • height: ${positioning.content.height}`);
    console.log(`  • max-height: ${positioning.content.maxHeight}`);
    console.log(`  • top: ${positioning.content.top}`);
    console.log(`  • left: ${positioning.content.left}\n`);

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