diff --git a/e2e/blog.spec.ts b/e2e/blog.spec.ts index 26c7dae..54b9715 100644 --- a/e2e/blog.spec.ts +++ b/e2e/blog.spec.ts @@ -99,13 +99,27 @@ for (const skin of ["standard", "terminal"] as const) ); if (path.includes(introSlug)) { await expect(page.locator(".product-screens-hero")).toHaveCount(0); - await expect(page.locator(".product-screens-row img")).toHaveCount( - 3 - ); - await expect(page.locator(".product-screens-row")).toHaveCSS( - "overflow-x", - "auto" - ); + const shots = page.locator(".product-screens-row img"); + await expect(shots).toHaveCount(3); + if (width < 720) { + const boxes = await shots.evaluateAll((images) => + images.map((image) => { + const box = image.getBoundingClientRect(); + return { top: box.top, right: box.right, left: box.left }; + }) + ); + expect(boxes[1].top).toBeGreaterThan(boxes[0].top); + expect(boxes[2].top).toBeGreaterThan(boxes[1].top); + for (const box of boxes) { + expect(box.left).toBeGreaterThanOrEqual(-1); + expect(box.right).toBeLessThanOrEqual(width + 1); + } + } else { + await expect(page.locator(".product-screens-row")).toHaveCSS( + "overflow-x", + "auto" + ); + } const stack = page.locator(".mobile-stack"); const appwrite = stack.getByText("Appwrite", { exact: true }); await appwrite.scrollIntoViewIfNeeded(); diff --git a/e2e/localization.spec.ts b/e2e/localization.spec.ts index 51d211a..94cdbcb 100644 --- a/e2e/localization.spec.ts +++ b/e2e/localization.spec.ts @@ -180,11 +180,7 @@ for (const width of [639, 640, 1099, 1100]) await page.goto(`/pl/?skin=${skin}&theme=dark`); const brand = await page.locator(".brand").boundingBox(), switchBox = await page.locator(".language-switch").boundingBox(); - if (width < 640) - expect(switchBox!.y).toBeGreaterThanOrEqual( - brand!.y + brand!.height - 1 - ); - else expect(Math.abs(switchBox!.y - brand!.y)).toBeLessThan(15); + expect(Math.abs(switchBox!.y - brand!.y)).toBeLessThan(15); expect( await page.evaluate( () => document.documentElement.scrollWidth <= innerWidth diff --git a/src/components/Blog/ProductScreens.tsx b/src/components/Blog/ProductScreens.tsx index 9d8cbf3..72c9daa 100644 --- a/src/components/Blog/ProductScreens.tsx +++ b/src/components/Blog/ProductScreens.tsx @@ -54,11 +54,7 @@ export function ProductScreens({ locale = "en" }: { locale?: BlogLocale }) { className="product-screens-row" tabIndex={0} role="region" - aria-label={ - pl - ? "Ekrany aplikacji. Na wąskim ekranie przewiń w poziomie." - : "App screens. On a narrow screen, scroll sideways." - } + aria-label={pl ? "Ekrany aplikacji" : "App screens"} > {shots[locale].map((shot, index) => (
diff --git a/src/components/Blog/blog.css b/src/components/Blog/blog.css index 57c40fc..80eb0f7 100644 --- a/src/components/Blog/blog.css +++ b/src/components/Blog/blog.css @@ -127,6 +127,19 @@ min-width: 160px; max-width: 220px; } +@media (max-width: 719px) { + .product-screens-row { + flex-direction: column; + align-items: center; + overflow-x: visible; + } + .product-screens-shot { + flex: none; + width: min(100%, 260px); + min-width: 0; + max-width: 260px; + } +} .product-screens .phone-tile { width: 100%; } diff --git a/src/design/skin-terminal.css b/src/design/skin-terminal.css index 6c5c7d0..8193e8c 100644 --- a/src/design/skin-terminal.css +++ b/src/design/skin-terminal.css @@ -1666,11 +1666,7 @@ html.skin-terminal.dark-theme .hero-portrait { border: 1px solid var(--accent); } -/* Keep both language/header rows inside the sticky Terminal surface. */ @media (max-width: 639px) { - html.skin-terminal { - --header-height: 116px; - } :where(html.skin-terminal) .language-switch a { border-radius: 0; } diff --git a/src/i18n/localization.css b/src/i18n/localization.css index a0fd7a2..8114dd9 100644 --- a/src/i18n/localization.css +++ b/src/i18n/localization.css @@ -25,27 +25,20 @@ outline-offset: 2px; } @media (max-width: 639px) { - :root { - --header-height: 112px; - } .site-header-inner { - display: grid; - grid-template-columns: minmax(0, 1fr) auto auto auto; - grid-template-rows: minmax(44px, 1fr) 44px; - column-gap: 8px; - position: relative; - padding-top: 8px; - padding-bottom: 4px; - row-gap: 0; + gap: 2px; } - .language-switch { - grid-column: 1 / -1; - grid-row: 2; - justify-content: flex-end; - height: 44px; + .brand { + min-width: min-content; + } + .language-switch a { + min-width: 32px; + } + .nav-toggle { + padding-inline: 10px; } } -@media (min-width: 640px) and (max-width: 1099px) { +@media (max-width: 1099px) { .language-switch { margin-left: auto; } @@ -61,9 +54,3 @@ gap: 14px; } } - -@media (max-width: 379px) { - .site-header-inner { - grid-template-columns: minmax(0, 1fr) auto auto; - } -}