From e434cef83d6d4e90b4dee0cb6dc62a2eb293c899 Mon Sep 17 00:00:00 2001
From: Cyber Preacher <72062250+Cyber-preacher@users.noreply.github.com>
Date: Tue, 8 Sep 2026 18:07:07 +0400
Subject: [PATCH] Center proposal card metadata without shifting on expansion

Measure the collapsed header to align pills, dates, and chevrons while preserving their position when summaries expand. Retain the stacked mobile layout and cover variable content and viewport sizes in Playwright.
---
 src/components/GlassyRecordCard.css       |   3 +
 src/components/GlassyRecordCard.tsx       |  39 +++++++-
 tests/e2e/proposal-card-alignment.spec.ts | 112 ++++++++++++++++++++++
 3 files changed, 153 insertions(+), 1 deletion(-)
 create mode 100644 tests/e2e/proposal-card-alignment.spec.ts

diff --git a/src/components/GlassyRecordCard.css b/src/components/GlassyRecordCard.css
index 4aa8d45..26ea3a3 100644
--- a/src/components/GlassyRecordCard.css
+++ b/src/components/GlassyRecordCard.css
@@ -86,6 +86,7 @@
 
 .glassy-record-card__button {
   display: grid;
+  align-items: start;
   width: 100%;
   grid-template-columns: minmax(10rem, 1fr) minmax(36rem, 42rem);
   gap: 1rem;
@@ -118,6 +119,7 @@
 .glassy-record-card__aside {
   display: grid;
   align-self: start;
+  margin-top: var(--record-aside-offset, 0px);
   grid-template-columns:
     minmax(15rem, 1fr) minmax(8.75rem, 9.5rem)
     7.75rem 1.25rem;
@@ -225,6 +227,7 @@
 
   .glassy-record-card__aside {
     display: flex;
+    margin-top: 0;
     flex-wrap: wrap;
     justify-content: flex-start;
   }
diff --git a/src/components/GlassyRecordCard.tsx b/src/components/GlassyRecordCard.tsx
index 740b0a7..35d6b62 100644
--- a/src/components/GlassyRecordCard.tsx
+++ b/src/components/GlassyRecordCard.tsx
@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { useLayoutEffect, useRef, type ReactNode } from "react";
 
 import { ChevronDown } from "lucide-react";
 
@@ -40,6 +40,42 @@ export function GlassyRecordCard({
   summary,
   title,
 }: GlassyRecordCardProps) {
+  const headerRef = useRef<HTMLButtonElement>(null);
+  useLayoutEffect(() => {
+    const header = headerRef.current;
+    if (!header) return;
+    const copy = header.querySelector<HTMLElement>(".glassy-record-card__copy");
+    const summary = header.querySelector<HTMLElement>(
+      ".glassy-record-card__summary",
+    );
+    const aside = header.querySelector<HTMLElement>(
+      ".glassy-record-card__aside",
+    );
+    if (!copy || !summary || !aside) return;
+
+    const alignMetadata = () => {
+      // Anchor to the collapsed header even while the full summary is visible.
+      const summaryLineHeight = Number.parseFloat(
+        getComputedStyle(summary).minHeight,
+      );
+      const expandedHeight = Math.max(
+        0,
+        summary.getBoundingClientRect().height - summaryLineHeight,
+      );
+      const collapsedHeight =
+        copy.getBoundingClientRect().height - expandedHeight;
+      const offset = Math.max(
+        0,
+        (collapsedHeight - aside.getBoundingClientRect().height) / 2,
+      );
+      header.style.setProperty("--record-aside-offset", `${offset}px`);
+    };
+    alignMetadata();
+    const observer = new ResizeObserver(alignMetadata);
+    for (const element of [copy, summary, aside]) observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+
   const renderedSummary =
     typeof summary === "string" ? normalizePreviewText(summary) : summary;
 
@@ -55,6 +91,7 @@ export function GlassyRecordCard({
       )}
     >
       <Button
+        ref={headerRef}
         type="button"
         size="content"
         variant="bare"
diff --git a/tests/e2e/proposal-card-alignment.spec.ts b/tests/e2e/proposal-card-alignment.spec.ts
new file mode 100644
index 0000000..3f73286
--- /dev/null
+++ b/tests/e2e/proposal-card-alignment.spec.ts
@@ -0,0 +1,112 @@
+import { expect, test, type Locator } from "@playwright/test";
+import type { ProposalListItemDto } from "../../src/types/api";
+
+const proposals: ProposalListItemDto[] = [
+  { title: "Short title", summary: "A short summary." },
+  {
+    title: "A longer proposal title that wraps across several lines",
+    summary: "Full proposal context remains readable when expanded. ".repeat(
+      20,
+    ),
+  },
+  { title: "No summary", summary: "" },
+  {
+    title: "An initiative proposal",
+    summary: "Supporting proposal details. ".repeat(12),
+    initiative: { id: "test-initiative", title: "Community research" },
+  },
+].map((content, index) => ({
+  id: `alignment-${index}`,
+  meta: "General chamber",
+  chamber: index === 2 ? "Long chamber name ".repeat(6) : "General chamber",
+  stage: "citizen_veto",
+  summaryPill: "Citizen veto",
+  stageData: [],
+  stats: [],
+  proposer: "Test author",
+  proposerId: "test-author",
+  tier: "Citizen",
+  proofFocus: "pog",
+  tags: [],
+  keywords: [],
+  date: "2026-09-08",
+  votes: 0,
+  activityScore: 0,
+  ctaPrimary: "Open proposal",
+  ctaSecondary: "",
+  ...content,
+}));
+
+async function geometry(card: Locator) {
+  return card.evaluate((element) => {
+    const header = element.querySelector(".glassy-record-card__button")!;
+    const bounds = header.getBoundingClientRect();
+    const selectors = ["metaPill", "stage", "time", "chevron"];
+    return selectors.map((suffix) => {
+      const item = header.querySelector(`.glassy-record-card__${suffix}`)!;
+      const rect = item.getBoundingClientRect();
+      return {
+        x: rect.x - bounds.x,
+        y: rect.y - bounds.y,
+        centerOffset: rect.y + rect.height / 2 - bounds.y - bounds.height / 2,
+      };
+    });
+  });
+}
+
+test("proposal metadata centers on collapsed cards and stays fixed on expansion", async ({
+  page,
+}) => {
+  await page.route("**/api/**", async (route) => {
+    const path = new URL(route.request().url()).pathname;
+    if (path === "/api/proposals") {
+      await route.fulfill({ json: { items: proposals } });
+    } else if (path.endsWith("/citizen-veto")) {
+      await route.fulfill({
+        json: {
+          stats: [],
+          stageData: [],
+          attemptsUsed: 0,
+          attemptsRemaining: 1,
+        },
+      });
+    } else {
+      await route.fulfill({ json: { authenticated: false } });
+    }
+  });
+  await page.setViewportSize({ width: 1440, height: 1000 });
+  await page.goto("/app/proposals");
+  const cards = page.locator(".glassy-record-card");
+  await expect(cards).toHaveCount(proposals.length);
+
+  for (const width of [1440, 1920, 1280]) {
+    await page.setViewportSize({ width, height: 1000 });
+    for (const card of await cards.all()) {
+      await expect
+        .poll(async () =>
+          Math.max(
+            ...(await geometry(card)).map((g) => Math.abs(g.centerOffset)),
+          ),
+        )
+        .toBeLessThan(1);
+      const before = await geometry(card);
+      await card.locator(".glassy-record-card__button").click();
+      await expect(card.locator(".glassy-record-card__details")).toBeVisible();
+      const after = await geometry(card);
+      for (let i = 0; i < before.length; i++) {
+        expect(after[i].x).toBeCloseTo(before[i].x, 0);
+        expect(after[i].y).toBeCloseTo(before[i].y, 0);
+      }
+      await card.locator(".glassy-record-card__button").click();
+    }
+  }
+
+  for (const width of [390, 768, 1024]) {
+    await page.setViewportSize({ width, height: 1000 });
+    await cards.first().locator(".glassy-record-card__button").click();
+    expect(
+      await page.evaluate(() => document.documentElement.scrollWidth),
+    ).toBeLessThanOrEqual(width);
+    await cards.first().locator(".glassy-record-card__button").click();
+  }
+});