Fix comparison preview body alignment

Author: EmoPorEmilio

apps/comparison/e2e/component-page-layout.spec.ts

@@ -0,0 +1,49 @@
+import { expect, test } from "@playwright/test";
+import { waitForComparisonRouteReady } from "./comparison-page";
+import { pinComparisonTheme } from "./visual-diff";
+
+test.describe("component page layout", () => {
+  test("keeps rendered framework examples visible near the top of tall previews", async ({
+    page,
+  }) => {
+    await pinComparisonTheme(page, "dark");
+    await page.goto("/components/searchfield/");
+    await waitForComparisonRouteReady(page);
+
+    const section = page.locator("#example").filter({
+      has: page.locator("h2", { hasText: "Example" }),
+    });
+    const metrics = await section.locator(".s2-framework-panel").evaluateAll((panels) =>
+      panels.map((panel) => {
+        const fixture = panel.querySelector<HTMLElement>("[data-comparison-control-root]");
+
+        if (fixture == null) {
+          throw new Error("Expected framework panel to contain a rendered fixture root.");
+        }
+
+        const panelRect = panel.getBoundingClientRect();
+        const fixtureRect = fixture.getBoundingClientRect();
+
+        return {
+          framework: panel.getAttribute("data-framework") ?? "unknown",
+          fixtureTop: Number(fixtureRect.top.toFixed(4)),
+          topOffset: Number((fixtureRect.top - panelRect.top).toFixed(4)),
+          viewportHeight: window.innerHeight,
+        };
+      }),
+    );
+
+    expect(metrics).toHaveLength(2);
+
+    for (const metric of metrics) {
+      expect(
+        metric.fixtureTop,
+        `${metric.framework} fixture should be in the initial viewport`,
+      ).toBeLessThan(metric.viewportHeight);
+      expect(
+        metric.topOffset,
+        `${metric.framework} fixture should not be vertically centered below tall controls`,
+      ).toBeLessThanOrEqual(160);
+    }
+  });
+});

apps/comparison/src/styles/global.css

@@ -753,7 +753,8 @@ html[data-theme="dark"] body.s2-docs {
 .s2-framework-panel > .comparison-island,
 .s2-framework-panel > .s2-empty-state {
   display: grid;
-  place-items: center;
+  align-items: start;
+  justify-items: center;
   height: 100%;
   min-height: var(--s2-example-preview-min-height);
   padding: 44px 16px 26px;
@@ -780,8 +781,9 @@ html[data-theme="dark"] body.s2-docs {
   inline-size: max-content;
   max-inline-size: 100%;
   justify-self: center;
-  align-content: center;
-  place-items: center;
+  align-content: start;
+  align-items: start;
+  justify-items: center;
   min-height: auto;
 }