fix(hero) :: show image first on small screens when reversed

CHANGELOG.md

@@ -6,6 +6,8 @@
 
 - Refined the official website with muted blue accents, simpler navigation, a clearer primary action, and a level SQL ribbon with vertical separators, and a grounded studio scene with brushed metal and physical reflections. Restored visible progress in the streaming comparison animation.
 
+- A hero with `reverse` shows its image above the text on small screens. ([#828](https://github.com/sqlpage/SQLPage/issues/828))
+
 - The table component accepts a top-level `title`, shown in a header above the table like in the list and datagrid components. ([#1261](https://github.com/sqlpage/SQLPage/issues/1261))
 
 - Restored parameter reuse for repeated variables on SQL Server, PostgreSQL, and SQLite, fixing SQL Server and PostgreSQL queries that repeat a variable-dependent expression in `SELECT` and `GROUP BY`.

examples/official-site/sqlpage/migrations/02_hero_component.sql

@@ -92,7 +92,7 @@ FROM
             ('loop', 'Loop the video', 'BOOLEAN', TRUE, TRUE),
             (
                 'reverse',
-                'Reverse the order of the image and text: the image will be on the left, and the text on the right.',
+                'Reverse the order of the image and text: the image will be on the left, and the text on the right. On small screens, the image will be above the text.',
                 'BOOLEAN',
                 TRUE,
                 TRUE

sqlpage/templates/hero.handlebars

@@ -1,4 +1,4 @@
-<header class="row align-items-center{{#if reverse}} flex-row-reverse{{/if}}" {{#if id}} id="{{id}}"{{/if}}>
+<header class="row align-items-center{{#if reverse}} flex-column-reverse flex-lg-row-reverse{{/if}}" {{#if id}} id="{{id}}"{{/if}}>
   <div class="hero-title col text-center">
     <h1 class="lh-lg" style="font-size: 3rem">{{title}}</h1>
     <div class="fs-1 mx-5 text-muted">

tests/end-to-end/fixtures/hero/reversed/index.sql

@@ -0,0 +1,5 @@
+SELECT
+    'hero' AS component,
+    'Reversed hero' AS title,
+    'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400"/>' AS image,
+    TRUE AS reverse;

tests/end-to-end/fixtures/hero/reversed/test.ts

@@ -0,0 +1,27 @@
+import { expect, type Page, test } from "../../../fixture.ts";
+
+async function heroLayout(page: Page, width: number) {
+  await page.setViewportSize({ width, height: 900 });
+  const image = await page
+    .getByRole("img", { name: "Reversed hero" })
+    .boundingBox();
+  const title = await page
+    .getByRole("heading", { name: "Reversed hero" })
+    .boundingBox();
+  if (!image || !title) throw new Error("the hero is not visible");
+  return { image, title };
+}
+
+test("a reversed hero shows the image above the title on phones", async ({
+  page,
+}) => {
+  const { image, title } = await heroLayout(page, 390);
+  expect(image.y + image.height).toBeLessThanOrEqual(title.y);
+});
+
+test("a reversed hero shows the image left of the title on desktops", async ({
+  page,
+}) => {
+  const { image, title } = await heroLayout(page, 1400);
+  expect(image.x + image.width).toBeLessThanOrEqual(title.x);
+});