diff --git a/static/css/05-responsive/_breakpoints.css b/static/css/05-responsive/_breakpoints.css index dcb6959..3a22973 100644 --- a/static/css/05-responsive/_breakpoints.css +++ b/static/css/05-responsive/_breakpoints.css @@ -937,9 +937,80 @@ display: inline-flex !important; } - /* Reduce sidebar padding */ - .cv-sidebar { + /* Fix sidebar to show all content in landscape */ + .cv-sidebar, + .cv-sidebar-left, + .cv-sidebar-right { padding: 0.75rem !important; + overflow: visible !important; /* CRITICAL: Allow content to show */ + height: auto !important; /* CRITICAL: Remove fixed height */ + max-height: none !important; + } + + /* CRITICAL: Fix actual-content wrapper to expand with accordion content */ + .cv-sidebar .actual-content, + .cv-sidebar-left .actual-content, + .cv-sidebar-right .actual-content { + height: auto !important; + max-height: none !important; + overflow: visible !important; + } + + /* CRITICAL: Force accordions open in landscape so sidebars are visible */ + /* Override
default collapsed behavior by completely neutralizing it */ + .sidebar-accordion, + .sidebar-accordion[open], + .sidebar-accordion:not([open]) { + display: block !important; /* Override details display */ + overflow: visible !important; + height: auto !important; + max-height: none !important; + min-height: 0 !important; + } + + /* Ensure all children of details are visible */ + .sidebar-accordion > * { + display: block !important; + } + + /* Make the summary not clickable in landscape since accordion should stay open */ + .sidebar-accordion summary { + pointer-events: none !important; + list-style: none !important; /* Remove details arrow */ + } + + .sidebar-accordion summary::-webkit-details-marker { + display: none !important; /* Remove Chrome/Safari details marker */ + } + + /* Show chevron as pointing down (expanded state) */ + .sidebar-accordion summary.sidebar-accordion-header .chevron { + transform: rotate(0deg) !important; /* Chevron points down = expanded */ + } + + /* Force accordion content visible regardless of [open] attribute */ + .sidebar-accordion .sidebar-accordion-content, + .sidebar-accordion:not([open]) .sidebar-accordion-content { + display: block !important; + opacity: 1 !important; + max-height: none !important; + visibility: visible !important; + overflow: visible !important; + } + + /* Show inner details elements as expanded too */ + .sidebar-accordion details { + /* Make nested details also expanded */ + } + + .sidebar-accordion details > summary::after { + transform: rotate(0deg) !important; + } + + .sidebar-accordion details .sidebar-content { + display: block !important; + max-height: none !important; + opacity: 1 !important; } /* Compact accordion headers in landscape */ diff --git a/static/js/main.js b/static/js/main.js index b2b9ab7..02ec9a3 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -73,6 +73,36 @@ document.querySelectorAll('details').forEach(d => d.removeAttribute('open')); }; + /** + * Auto-open sidebar accordions in landscape mobile mode + * Ensures sidebar content is visible in landscape orientation + */ + function handleLandscapeAccordions() { + function openSidebarAccordionsIfLandscape() { + const isLandscape = window.matchMedia('(max-width: 915px) and (orientation: landscape)').matches; + + if (isLandscape) { + // Open all sidebar accordions in landscape mode + document.querySelectorAll('.sidebar-accordion').forEach(accordion => { + accordion.setAttribute('open', ''); + }); + } + } + + // Run on load + openSidebarAccordionsIfLandscape(); + + // Run on orientation change + window.addEventListener('orientationchange', () => { + setTimeout(openSidebarAccordionsIfLandscape, 100); + }); + + // Run on resize (for desktop browser testing) + window.addEventListener('resize', () => { + openSidebarAccordionsIfLandscape(); + }); + } + /** * Close menu when navigation links are clicked * CSS handles scrolling with scroll-behavior: smooth @@ -539,6 +569,7 @@ initPreferences(); initErrorToastClose(); initHTMXHandlers(); + handleLandscapeAccordions(); // Auto-open sidebar accordions in landscape mode initZoomControlButtons(); }); diff --git a/tests/mjs/54-landscape-mode-test.mjs b/tests/mjs/54-landscape-mode-test.mjs index 2e1cd2a..7338260 100755 --- a/tests/mjs/54-landscape-mode-test.mjs +++ b/tests/mjs/54-landscape-mode-test.mjs @@ -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`); diff --git a/tests/mjs/60-sidebar-content-debug.mjs b/tests/mjs/60-sidebar-content-debug.mjs new file mode 100755 index 0000000..f57fd5a --- /dev/null +++ b/tests/mjs/60-sidebar-content-debug.mjs @@ -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(); +})(); diff --git a/tests/mjs/61-sidebar-positioning-debug.mjs b/tests/mjs/61-sidebar-positioning-debug.mjs new file mode 100755 index 0000000..fabc044 --- /dev/null +++ b/tests/mjs/61-sidebar-positioning-debug.mjs @@ -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(); +})(); diff --git a/tests/mjs/62-sidebar-computed-height-debug.mjs b/tests/mjs/62-sidebar-computed-height-debug.mjs new file mode 100755 index 0000000..c0dcfa6 --- /dev/null +++ b/tests/mjs/62-sidebar-computed-height-debug.mjs @@ -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(); +})(); diff --git a/tests/mjs/63-media-query-match-test.mjs b/tests/mjs/63-media-query-match-test.mjs new file mode 100755 index 0000000..b8485b0 --- /dev/null +++ b/tests/mjs/63-media-query-match-test.mjs @@ -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(); +})();