Skip to content

MWPW-180247: Fix prompt-card equal-height alignment across mixed title lengths - #198

Open
DavidKHahn wants to merge 1 commit into
stagefrom
MWPW-180247
Open

MWPW-180247: Fix prompt-card equal-height alignment across mixed title lengths#198
DavidKHahn wants to merge 1 commit into
stagefrom
MWPW-180247

Conversation

@DavidKHahn

@DavidKHahn DavidKHahn commented Sep 4, 2026

Copy link
Copy Markdown
Collaborator

Summary

  • study-marquee sibling block prompt-card had an inert flex layout (display: flow instead of flex), so cards with different title line-counts in the same grid row rendered at different heights, misaligning the "Copy" button row (e.g. visible on /ar/acrobat/generative-ai-pdf/ai-prompts.html)
  • Fixes .prompt-card/.prompt-blade/.prompt-copy/.prompt-copy-btn-wrapper so cards stretch to equal height, the grey prompt-preview box grows to fill available space (with a safe minimum so long content still line-clamps correctly), and the CTA row aligns consistently
  • Also fixes a box-sizing gap that would have inflated every card's height by ~42px regardless of content length

Before / After

TEST URLS (QA):

Before (prod):
https://www.adobe.com/ar/acrobat/generative-ai-pdf/ai-prompts.html
https://www.adobe.com/acrobat/online/ai-chat-pdf
https://www.adobe.com/acrobat/online/ai-summary-generator
https://www.adobe.com/acrobat/generative-ai-pdf/students

After (branch preview):
https://mwpw-180247--da-dc--adobecom.aem.page/ar/acrobat/generative-ai-pdf/ai-prompts
https://mwpw-180247--da-dc--adobecom.aem.page/acrobat/online/ai-chat-pdf
https://mwpw-180247--da-dc--adobecom.aem.page/acrobat/online/ai-summary-generator
https://mwpw-180247--da-dc--adobecom.aem.page/acrobat/generative-ai-pdf/students

Test plan

  • Verified against real production content (Playwright) that mismatched-title rows now align (card height, button position)
  • Verified pages with uniform title lengths (ai-chat-pdf, ai-summary-generator) render pixel-identical before/after — no regression
  • Verified long content still respects the 5-line clamp and doesn't get squished
  • Existing unit tests pass: test/blocks/prompt-card/*.test.js (18/18)
  • Manually verified on branch preview (link above)

Known follow-up (not in this PR)

  • acrobat/scripts/mep/dc1052/prompt-card/prompt-card.css is a separate MEP-experiment copy of this file that still has the original bug. Left untouched pending confirmation on whether that experiment is still active.

The block's flex layout was inert (display: flow instead of flex),
so cards with different title line-counts in the same grid row
rendered at different heights, misaligning the Copy button row
(MWPW-180247). Also fixes a box-sizing gap that would have inflated
every card's height regardless of content.
@aem-code-sync

aem-code-sync Bot commented Sep 4, 2026

Copy link
Copy Markdown

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

  • Re-run all PSI checks
  • Re-run failed PSI checks
  • Re-sync branch
Commits

@codecov

codecov Bot commented Sep 4, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 78.01%. Comparing base (225fc08) to head (59989d2).

Additional details and impacted files
@@            Coverage Diff             @@
##            stage     #198      +/-   ##
==========================================
+ Coverage   77.18%   78.01%   +0.83%     
==========================================
  Files          47       47              
  Lines       11554    11554              
==========================================
+ Hits         8918     9014      +96     
+ Misses       2636     2540      -96     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@aem-code-sync

aem-code-sync Bot commented Sep 4, 2026

Copy link
Copy Markdown

@DavidKHahn DavidKHahn self-assigned this Sep 4, 2026
@DavidKHahn
DavidKHahn marked this pull request as ready for review September 4, 2026 22:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant