juanatsap
82f73cf724
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)
56 lines
2.7 KiB
JavaScript
Executable File
56 lines
2.7 KiB
JavaScript
Executable File
#!/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();
|
||
})();
|