fix: Remove unused cookie helper functions and fix desktop sidebar visibility

1. Removed unused getPreferenceCookie and setPreferenceCookie functions - These were flagged by golangci-lint as unused - Cookie preferences now handled client-side via localStorage - Removed unused net/http import 2. Fixed desktop sidebar accordion auto-opening - Updated handleLandscapeAccordions() to open accordions in desktop view (≥769px) - Sidebars now show content in desktop, landscape mobile, and portrait mobile - Only keep accordions collapsed in portrait mobile for space saving 3. Created comprehensive multi-viewport test (66-comprehensive-all-viewports-test.mjs) - Tests desktop (1278px), portrait mobile (375×667), landscape mobile (667×375) - Validates sidebars, accordion state, content visibility, AND all buttons - Checks button backdrop visibility in mobile views - Every feature now has corresponding test coverage Fixes golangci-lint errors: - internal/handlers/cv_helpers.go:366: func getPreferenceCookie is unused - internal/handlers/cv_helpers.go:375: func setPreferenceCookie is unused - internal/handlers/cv_helpers.go:7: net/http imported and not used
2025-11-25 06:00:39 +00:00
parent 82f73cf724
commit 76d80edd7e
5 changed files with 455 additions and 31 deletions
@@ -0,0 +1,111 @@
+#!/usr/bin/env node
+
+import { chromium } from 'playwright';
+
+const DESKTOP_VIEWPORT = { width: 1278, height: 800 };
+
+(async () => {
+    const browser = await chromium.launch({ headless: true });
+    const context = await browser.newContext({
+        viewport: DESKTOP_VIEWPORT
+    });
+    const page = await context.newPage();
+
+    await page.goto('http://localhost:1999/?lang=en&view=extended');
+    await page.waitForLoadState('networkidle');
+
+    // Scroll to Page 2
+    await page.evaluate(() => {
+        const page2 = document.querySelector('.page-2');
+        if (page2) {
+            page2.scrollIntoView();
+        }
+    });
+
+    await page.waitForTimeout(500);
+
+    const page2Debug = await page.evaluate(() => {
+        const page2 = document.querySelector('.page-2');
+        const pageContent = page2?.querySelector('.page-content');
+        const sidebarRight = page2?.querySelector('.cv-sidebar-right');
+        const accordion = sidebarRight?.querySelector('.sidebar-accordion');
+        const actualContent = sidebarRight?.querySelector('.actual-content');
+        const accordionContent = sidebarRight?.querySelector('.sidebar-accordion-content');
+
+        const sidebarRect = sidebarRight?.getBoundingClientRect();
+        const accordionRect = accordion?.getBoundingClientRect();
+
+        return {
+            page2Exists: !!page2,
+            pageContentGrid: pageContent ? window.getComputedStyle(pageContent).gridTemplateColumns : 'N/A',
+
+            sidebarRight: {
+                exists: !!sidebarRight,
+                display: sidebarRight ? window.getComputedStyle(sidebarRight).display : 'N/A',
+                visibility: sidebarRight ? window.getComputedStyle(sidebarRight).visibility : 'N/A',
+                width: sidebarRect ? Math.round(sidebarRect.width) : 0,
+                height: sidebarRect ? Math.round(sidebarRect.height) : 0,
+                backgroundColor: sidebarRight ? window.getComputedStyle(sidebarRight).backgroundColor : 'N/A',
+            },
+
+            accordion: {
+                exists: !!accordion,
+                open: accordion?.hasAttribute('open'),
+                height: accordionRect ? Math.round(accordionRect.height) : 0,
+                display: accordion ? window.getComputedStyle(accordion).display : 'N/A',
+            },
+
+            actualContent: {
+                exists: !!actualContent,
+                display: actualContent ? window.getComputedStyle(actualContent).display : 'N/A',
+                opacity: actualContent ? window.getComputedStyle(actualContent).opacity : 'N/A',
+                height: actualContent ? Math.round(actualContent.getBoundingClientRect().height) : 0,
+            },
+
+            accordionContent: {
+                exists: !!accordionContent,
+                display: accordionContent ? window.getComputedStyle(accordionContent).display : 'N/A',
+                opacity: accordionContent ? window.getComputedStyle(accordionContent).opacity : 'N/A',
+                height: accordionContent ? Math.round(accordionContent.getBoundingClientRect().height) : 0,
+            }
+        };
+    });
+
+    console.log('Page 2 Right Sidebar Debug:\n');
+
+    console.log('Page Content Grid:');
+    console.log(`  • Grid columns: ${page2Debug.pageContentGrid}\n`);
+
+    console.log('Right Sidebar:');
+    console.log(`  • Exists: ${page2Debug.sidebarRight.exists ? '✅' : '❌'}`);
+    console.log(`  • Display: ${page2Debug.sidebarRight.display}`);
+    console.log(`  • Visibility: ${page2Debug.sidebarRight.visibility}`);
+    console.log(`  • Size: ${page2Debug.sidebarRight.width}×${page2Debug.sidebarRight.height}px`);
+    console.log(`  • Background: ${page2Debug.sidebarRight.backgroundColor}\n`);
+
+    console.log('Accordion:');
+    console.log(`  • Exists: ${page2Debug.accordion.exists ? '✅' : '❌'}`);
+    console.log(`  • Display: ${page2Debug.accordion.display}`);
+    console.log(`  • Open: ${page2Debug.accordion.open ? 'YES' : 'NO'}`);
+    console.log(`  • Height: ${page2Debug.accordion.height}px\n`);
+
+    console.log('Actual Content Wrapper:');
+    console.log(`  • Exists: ${page2Debug.actualContent.exists ? '✅' : '❌'}`);
+    console.log(`  • Display: ${page2Debug.actualContent.display}`);
+    console.log(`  • Opacity: ${page2Debug.actualContent.opacity}`);
+    console.log(`  • Height: ${page2Debug.actualContent.height}px\n`);
+
+    console.log('Accordion Content:');
+    console.log(`  • Exists: ${page2Debug.accordionContent.exists ? '✅' : '❌'}`);
+    console.log(`  • Display: ${page2Debug.accordionContent.display}`);
+    console.log(`  • Opacity: ${page2Debug.accordionContent.opacity}`);
+    console.log(`  • Height: ${page2Debug.accordionContent.height}px\n`);
+
+    await page.screenshot({
+        path: 'tests/screenshots/page-2-sidebar-debug.png',
+        fullPage: false
+    });
+    console.log('Screenshot saved: tests/screenshots/page-2-sidebar-debug.png');
+
+    await browser.close();
+})();