diff --git a/src/components/GlassyRecordCard.css b/src/components/GlassyRecordCard.css index 895c5f9..4aa8d45 100644 --- a/src/components/GlassyRecordCard.css +++ b/src/components/GlassyRecordCard.css @@ -104,10 +104,6 @@ color: var(--record-title-hover); } -.glassy-record-card--open .glassy-record-card__button { - grid-template-columns: minmax(0, 1fr); -} - .glassy-record-card__copy, .glassy-record-card__aside { min-width: 0; @@ -121,6 +117,7 @@ .glassy-record-card__aside { display: grid; + align-self: start; grid-template-columns: minmax(15rem, 1fr) minmax(8.75rem, 9.5rem) 7.75rem 1.25rem; diff --git a/tests/unit/glassy-record-card.test.tsx b/tests/unit/glassy-record-card.test.tsx index 58af24e..864bec5 100644 --- a/tests/unit/glassy-record-card.test.tsx +++ b/tests/unit/glassy-record-card.test.tsx @@ -28,7 +28,7 @@ test("record cards retain the complete summary for expansion", () => { assert.match(html, /glassy-record-card--open/); }); -test("record cards use visual ellipsis only while collapsed", () => { +test("record cards reveal summaries without moving their metadata grid", () => { const css = readFileSync( join(process.cwd(), "src/components/GlassyRecordCard.css"), "utf8", @@ -50,8 +50,10 @@ test("record cards use visual ellipsis only while collapsed", () => { assert.match(expandedRule, /overflow:\s*visible/); assert.match(expandedRule, /white-space:\s*normal/); - assert.match( + assert.doesNotMatch( css, - /\.glassy-record-card--open \.glassy-record-card__button\s*\{[^}]*grid-template-columns:\s*minmax\(0, 1fr\)/s, + /\.glassy-record-card--open \.glassy-record-card__button\s*\{/, ); + + assert.match(css, /\.glassy-record-card__aside\s*\{[^}]*align-self:\s*start/); });