Stack the article phones and keep the narrow header on one row.

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();

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

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) => (
           <div className="product-screens-shot" key={shot.src}>

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%;
 }

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;
   }

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;
-  }
-}