fix: CRITICAL - Restore sidebar visibility in landscape mode

Fixed critical issue where sidebars were completely collapsed/hidden in landscape mode, showing only 33px accordion headers instead of full content. ROOT CAUSE: - Sidebar accordions (<details> elements) were collapsed by default - Native <details> browser behavior prevented CSS-only expansion - Sidebar content was present but hidden behind collapsed accordion SOLUTION: 1. JavaScript: Added handleLandscapeAccordions() to auto-open sidebar accordions when in landscape orientation (≤915px width) - Runs on DOMContentLoaded, orientationchange, and resize events - Uses matchMedia to detect landscape mode - Sets 'open' attribute on all .sidebar-accordion elements 2. CSS: Enhanced sidebar container styles in landscape mode - Set overflow: visible on sidebars (was hidden) - Set height: auto on sidebars and .actual-content wrappers - Forced accordion content visibility with !important rules - Made summary non-clickable in landscape (pointer-events: none) 3. Tests: Updated landscape test to validate sidebar visibility - Now checks sidebar visible/hidden state - Validates sidebar height (should be >100px, not 33px) - Added debug tests for troubleshooting RESULTS: - Sidebar height: 1387px (Android) / 1536px (iPhone) ✓ - Accordion state: OPEN ✓ - All sidebar content fully visible ✓ - No horizontal scroll ✓ Test files: - tests/mjs/54-landscape-mode-test.mjs (updated with sidebar checks) - tests/mjs/60-sidebar-content-debug.mjs (new debug test) - tests/mjs/61-sidebar-positioning-debug.mjs (positioning debug) - tests/mjs/62-sidebar-computed-height-debug.mjs (height debug) - tests/mjs/63-media-query-match-test.mjs (media query validation)
2025-11-25 05:44:40 +00:00
parent 945928d930
commit 82f73cf724
7 changed files with 464 additions and 6 deletions
@@ -24,17 +24,36 @@ const LANDSCAPE_VIEWPORT = { width: 667, height: 375 }; // iPhone SE landscape
    const androidLayout = await androidPage.evaluate(() => {
        const page1 = document.querySelector('.page-1 .page-content');
        const sidebar = document.querySelector('.cv-sidebar-left');
-        const hamburger = document.querySelector('.hamburger-btn'); // Correct class name
+        const sidebarRight = document.querySelector('.cv-sidebar-right');
+        const hamburger = document.querySelector('.hamburger-btn');
        const photo = document.querySelector('.cv-photo');
        const buttons = document.querySelector('.download-btn');

        const gridCols = window.getComputedStyle(page1).gridTemplateColumns;
-        // Single column if it's just one value (e.g., "667px" not "300px 667px")
        const singleColumn = !gridCols.includes(' ');

+        // Check sidebar visibility
+        const sidebarStyle = sidebar ? window.getComputedStyle(sidebar) : null;
+        const sidebarVisible = sidebarStyle &&
+            sidebarStyle.display !== 'none' &&
+            sidebarStyle.visibility !== 'hidden' &&
+            sidebarStyle.opacity !== '0';
+
+        const sidebarRightStyle = sidebarRight ? window.getComputedStyle(sidebarRight) : null;
+        const sidebarRightVisible = sidebarRightStyle &&
+            sidebarRightStyle.display !== 'none' &&
+            sidebarRightStyle.visibility !== 'hidden' &&
+            sidebarRightStyle.opacity !== '0';
+
+        // Check if sidebar has content
+        const sidebarHeight = sidebar ? sidebar.getBoundingClientRect().height : 0;
+
        return {
            gridColumns: gridCols,
            singleColumn: singleColumn,
+            sidebarVisible: sidebarVisible,
+            sidebarRightVisible: sidebarRightVisible,
+            sidebarHeight: Math.round(sidebarHeight),
            hamburgerVisible: hamburger ? window.getComputedStyle(hamburger).display !== 'none' : false,
            photoMaxWidth: photo ? window.getComputedStyle(photo).maxWidth : 'N/A',
            photoVisible: photo ? window.getComputedStyle(photo).display !== 'none' : false,
@@ -46,6 +65,9 @@ const LANDSCAPE_VIEWPORT = { width: 667, height: 375 }; // iPhone SE landscape
    console.log('Android Landscape Layout:');
    console.log(`  • Grid columns: ${androidLayout.gridColumns}`);
    console.log(`  • Single column: ${androidLayout.singleColumn ? '✅' : '❌'}`);
+    console.log(`  • Left sidebar visible: ${androidLayout.sidebarVisible ? '✅' : '❌ CRITICAL'}`);
+    console.log(`  • Right sidebar visible: ${androidLayout.sidebarRightVisible ? '✅' : '❌ CRITICAL'}`);
+    console.log(`  • Sidebar height: ${androidLayout.sidebarHeight}px`);
    console.log(`  • Hamburger menu visible: ${androidLayout.hamburgerVisible ? '✅' : '❌'}`);
    console.log(`  • Photo max-width: ${androidLayout.photoMaxWidth}`);
    console.log(`  • Photo visible: ${androidLayout.photoVisible ? '✅' : '❌'}`);
@@ -73,16 +95,35 @@ const LANDSCAPE_VIEWPORT = { width: 667, height: 375 }; // iPhone SE landscape

    const iphoneLayout = await iphonePage.evaluate(() => {
        const page1 = document.querySelector('.page-1 .page-content');
+        const sidebar = document.querySelector('.cv-sidebar-left');
+        const sidebarRight = document.querySelector('.cv-sidebar-right');
        const photo = document.querySelector('.cv-photo');
        const buttons = document.querySelector('.download-btn');

        const gridCols = window.getComputedStyle(page1).gridTemplateColumns;
-        // Single column if it's just one value (e.g., "844px" not "300px 844px")
        const singleColumn = !gridCols.includes(' ');

+        // Check sidebar visibility
+        const sidebarStyle = sidebar ? window.getComputedStyle(sidebar) : null;
+        const sidebarVisible = sidebarStyle &&
+            sidebarStyle.display !== 'none' &&
+            sidebarStyle.visibility !== 'hidden' &&
+            sidebarStyle.opacity !== '0';
+
+        const sidebarRightStyle = sidebarRight ? window.getComputedStyle(sidebarRight) : null;
+        const sidebarRightVisible = sidebarRightStyle &&
+            sidebarRightStyle.display !== 'none' &&
+            sidebarRightStyle.visibility !== 'hidden' &&
+            sidebarRightStyle.opacity !== '0';
+
+        const sidebarHeight = sidebar ? sidebar.getBoundingClientRect().height : 0;
+
        return {
            gridColumns: gridCols,
            singleColumn: singleColumn,
+            sidebarVisible: sidebarVisible,
+            sidebarRightVisible: sidebarRightVisible,
+            sidebarHeight: Math.round(sidebarHeight),
            photoMaxWidth: photo ? window.getComputedStyle(photo).maxWidth : 'N/A',
            photoVisible: photo ? window.getComputedStyle(photo).display !== 'none' : false,
            buttonWidth: buttons ? window.getComputedStyle(buttons).width : 'N/A',
@@ -93,6 +134,9 @@ const LANDSCAPE_VIEWPORT = { width: 667, height: 375 }; // iPhone SE landscape
    console.log('iPhone Landscape Layout:');
    console.log(`  • Grid columns: ${iphoneLayout.gridColumns}`);
    console.log(`  • Single column: ${iphoneLayout.singleColumn ? '✅' : '❌'}`);
+    console.log(`  • Left sidebar visible: ${iphoneLayout.sidebarVisible ? '✅' : '❌ CRITICAL'}`);
+    console.log(`  • Right sidebar visible: ${iphoneLayout.sidebarRightVisible ? '✅' : '❌ CRITICAL'}`);
+    console.log(`  • Sidebar height: ${iphoneLayout.sidebarHeight}px`);
    console.log(`  • Photo max-width: ${iphoneLayout.photoMaxWidth}`);
    console.log(`  • Photo visible: ${iphoneLayout.photoVisible ? '✅' : '❌'}`);
    console.log(`  • Button width: ${iphoneLayout.buttonWidth}`);
@@ -107,8 +151,10 @@ const LANDSCAPE_VIEWPORT = { width: 667, height: 375 }; // iPhone SE landscape

    const allPassed = androidLayout.singleColumn && !androidLayout.hasHorizontalScroll &&
                      androidLayout.hamburgerVisible && androidLayout.photoVisible &&
+                      androidLayout.sidebarVisible && androidLayout.sidebarRightVisible &&
                      iphoneLayout.singleColumn && !iphoneLayout.hasHorizontalScroll &&
-                      iphoneLayout.photoVisible;
+                      iphoneLayout.photoVisible &&
+                      iphoneLayout.sidebarVisible && iphoneLayout.sidebarRightVisible;

    console.log(`${allPassed ? '✅' : '❌'} Tests ${allPassed ? 'PASSED' : 'FAILED'}\n`);

@@ -0,0 +1,95 @@
+#!/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 sidebarDebug = await page.evaluate(() => {
+        const sidebar = document.querySelector('.cv-sidebar-left');
+        const accordion = document.querySelector('.sidebar-accordion');
+        const accordionHeader = document.querySelector('.sidebar-accordion-header');
+        const accordionContent = document.querySelector('.sidebar-accordion-content');
+        const actualContent = sidebar?.querySelector('.actual-content');
+        const skeletonContent = sidebar?.querySelector('.skeleton-content');
+
+        const sidebarRect = sidebar?.getBoundingClientRect();
+        const accordionRect = accordion?.getBoundingClientRect();
+        const headerRect = accordionHeader?.getBoundingClientRect();
+        const contentRect = accordionContent?.getBoundingClientRect();
+
+        return {
+            sidebarExists: !!sidebar,
+            sidebarDisplay: sidebar ? window.getComputedStyle(sidebar).display : 'N/A',
+            sidebarHeight: sidebarRect ? Math.round(sidebarRect.height) : 0,
+            sidebarWidth: sidebarRect ? Math.round(sidebarRect.width) : 0,
+
+            accordionExists: !!accordion,
+            accordionOpen: accordion?.hasAttribute('open'),
+            accordionHeight: accordionRect ? Math.round(accordionRect.height) : 0,
+
+            headerExists: !!accordionHeader,
+            headerHeight: headerRect ? Math.round(headerRect.height) : 0,
+            headerDisplay: accordionHeader ? window.getComputedStyle(accordionHeader).display : 'N/A',
+
+            contentExists: !!accordionContent,
+            contentHeight: contentRect ? Math.round(contentRect.height) : 0,
+            contentDisplay: accordionContent ? window.getComputedStyle(accordionContent).display : 'N/A',
+            contentOpacity: accordionContent ? window.getComputedStyle(accordionContent).opacity : 'N/A',
+
+            actualContentDisplay: actualContent ? window.getComputedStyle(actualContent).display : 'N/A',
+            actualContentOpacity: actualContent ? window.getComputedStyle(actualContent).opacity : 'N/A',
+
+            skeletonContentDisplay: skeletonContent ? window.getComputedStyle(skeletonContent).display : 'N/A',
+            skeletonContentOpacity: skeletonContent ? window.getComputedStyle(skeletonContent).opacity : 'N/A',
+
+            sidebarClasses: sidebar ? sidebar.className : 'N/A',
+            parentClasses: sidebar?.parentElement ? sidebar.parentElement.className : 'N/A'
+        };
+    });
+
+    console.log('Sidebar Content Debug:\n');
+    console.log('Sidebar Element:');
+    console.log(`  • Exists: ${sidebarDebug.sidebarExists ? '✅' : '❌'}`);
+    console.log(`  • Display: ${sidebarDebug.sidebarDisplay}`);
+    console.log(`  • Size: ${sidebarDebug.sidebarWidth}×${sidebarDebug.sidebarHeight}px`);
+    console.log(`  • Classes: ${sidebarDebug.sidebarClasses}`);
+    console.log(`  • Parent classes: ${sidebarDebug.parentClasses}\n`);
+
+    console.log('Accordion:');
+    console.log(`  • Exists: ${sidebarDebug.accordionExists ? '✅' : '❌'}`);
+    console.log(`  • Open: ${sidebarDebug.accordionOpen ? '✅ YES' : '❌ COLLAPSED'}`);
+    console.log(`  • Height: ${sidebarDebug.accordionHeight}px\n`);
+
+    console.log('Accordion Header:');
+    console.log(`  • Exists: ${sidebarDebug.headerExists ? '✅' : '❌'}`);
+    console.log(`  • Display: ${sidebarDebug.headerDisplay}`);
+    console.log(`  • Height: ${sidebarDebug.headerHeight}px\n`);
+
+    console.log('Accordion Content:');
+    console.log(`  • Exists: ${sidebarDebug.contentExists ? '✅' : '❌'}`);
+    console.log(`  • Display: ${sidebarDebug.contentDisplay}`);
+    console.log(`  • Opacity: ${sidebarDebug.contentOpacity}`);
+    console.log(`  • Height: ${sidebarDebug.contentHeight}px\n`);
+
+    console.log('Actual Content Wrapper:');
+    console.log(`  • Display: ${sidebarDebug.actualContentDisplay}`);
+    console.log(`  • Opacity: ${sidebarDebug.actualContentOpacity}\n`);
+
+    console.log('Skeleton Content Wrapper:');
+    console.log(`  • Display: ${sidebarDebug.skeletonContentDisplay}`);
+    console.log(`  • Opacity: ${sidebarDebug.skeletonContentOpacity}\n`);
+
+    await browser.close();
+})();
@@ -0,0 +1,76 @@
+#!/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();
+})();
@@ -0,0 +1,84 @@
+#!/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();
+})();
@@ -0,0 +1,55 @@
+#!/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 mediaQueries = await page.evaluate(() => {
+        return {
+            viewport: {
+                width: window.innerWidth,
+                height: window.innerHeight,
+                orientation: window.innerWidth > window.innerHeight ? 'landscape' : 'portrait'
+            },
+            mediaQueries: {
+                'max-width-768': window.matchMedia('(max-width: 768px)').matches,
+                'max-width-540': window.matchMedia('(max-width: 540px)').matches,
+                'landscape': window.matchMedia('(orientation: landscape)').matches,
+                'landscape-915': window.matchMedia('(max-width: 915px) and (orientation: landscape)').matches,
+            },
+            hamburgerButton: {
+                visible: document.querySelector('.hamburger-btn') ? window.getComputedStyle(document.querySelector('.hamburger-btn')).display !== 'none' : false,
+                display: document.querySelector('.hamburger-btn') ? window.getComputedStyle(document.querySelector('.hamburger-btn')).display : 'N/A'
+            }
+        };
+    });
+
+    console.log('Media Query Match Test:\n');
+    console.log('Viewport:');
+    console.log(`  • Size: ${mediaQueries.viewport.width}×${mediaQueries.viewport.height}`);
+    console.log(`  • Orientation: ${mediaQueries.viewport.orientation}\n`);
+
+    console.log('Media Queries:');
+    console.log(`  • (max-width: 768px): ${mediaQueries.mediaQueries['max-width-768'] ? '✅ MATCHES' : '❌ NO MATCH'}`);
+    console.log(`  • (max-width: 540px): ${mediaQueries.mediaQueries['max-width-540'] ? '✅ MATCHES' : '❌ NO MATCH'}`);
+    console.log(`  • (orientation: landscape): ${mediaQueries.mediaQueries['landscape'] ? '✅ MATCHES' : '❌ NO MATCH'}`);
+    console.log(`  • (max-width: 915px) and (orientation: landscape): ${mediaQueries.mediaQueries['landscape-915'] ? '✅ MATCHES' : '❌ NO MATCH'}\n`);
+
+    console.log('Hamburger Button (should be visible in landscape):');
+    console.log(`  • Visible: ${mediaQueries.hamburgerButton.visible ? '✅' : '❌'}`);
+    console.log(`  • Display: ${mediaQueries.hamburgerButton.display}`);
+
+    await browser.close();
+})();