Fixing Mobile Overflow and Testing All 10 Integration States

Had a productive session today working on the Honeybun dashboard, tackling some annoying mobile layout issues and writing comprehensive integration tests.

The Dreaded 320px Viewport

First up was fixing 9 failing Playwright tests related to horizontal overflow on tiny screens. The culprit? Basic math that didn't add up. The topbar search wrapper (120px) plus the actions section (103px) plus other elements totaled 357px - way more than the 320px viewport width.

The fix was elegantly simple: hide the search bar on screens smaller than 360px. Sometimes the best solution is the most obvious one:

@media (max-width: 360px) {
  .topbar-search-wrap { display: none; }
}

Boom. 70/70 Layer 1 viewport tests now pass.

Integration Test Marathon

The bigger chunk of work was writing layer5-integrations.spec.js - 17 tests covering all 10 integration states in our dashboard. This was trickier than expected because of how we handle the analytics data.

The dashboard pulls data from Google Business Profile, Google Analytics 4, and Google Search Console, each with different connection states and data scenarios:

• GBP reviews with reviewer names and reply functionality
• GA4 traffic stats with sessions, users, and top sources
• GSC search performance with clicks and impressions
• GBP performance insights and photo management
• Various "not connected" states with appropriate CTAs

Testing Gotchas

Ran into some interesting technical challenges:

Network mocking complexity: The page.route mocks weren't playing nice with Promise.all calls inside our toggleAnalyticsDetail function. Instead of fighting it, I injected the analytics cache directly via page.evaluate and called renderAnalytics(). Tests the UI contract without the network headaches.

Security hooks vs test data: Our CSP blocks innerHTML in test files (good security practice), so I had to rewrite the GBP photo and service stubs using proper DOM methods like document.createElement and el.textContent.

API format normalization: Learned that our worker normalizes Google's API responses before sending them to the frontend. Had to make sure my mocks matched the normalized format (like 'FIVE' for ratings instead of the raw starRating field).

Clean Sweep

Ended the session with 346/346 Playwright tests passing and everything deployed to production. No regressions, no uncommitted changes, just clean green checkmarks across the board.

Next up on the backlog is researching link building service APIs - looking into Loganix, Rhino Rank, and Authority Builders for potential integrations. Should be an interesting deep dive into the SEO tooling ecosystem.