fix: free trial chip in /pro/subscribe

[abhigyanghosh30]

Done

• Fix the visual of the free trial status beside the buy now button in /pro/subscribe

QA

• Open the DEMO
• Alternatively, check out this feature branch
• Run the site using the command ./run serve or dotrun
• View the site locally in your web browser at: http://0.0.0.0:8001/
  • Be sure to test on mobile, tablet and desktop screen sizes
• Visit /pro/subscribe

Issue / Card

Fixes #

Screenshots

Before:

After:

Help

QA steps - Commit guidelines

[webteam-app]

Demo

Jenkins

demos.haus

[Copilot]

Pull request overview

Updates the /pro/subscribe ProductSummary UI to improve the visual placement of the “Free trial on checkout” status chip relative to the checkout button.

Changes:

• Adjust vertical alignment in the desktop/tablet ProductSummary action area to align elements to the bottom.
• Add spacing between the free-trial StatusLabel and the PaymentButton.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The spacing between StatusLabel and PaymentButton is currently achieved via marginRight on the label. Since the parent <Col> is already a flex container, consider using gap on the flex container instead to avoid duplicating inline styles on children and keep spacing concerns on the layout wrapper.

[Copilot]

On the small/medium layout the free-trial StatusLabel is rendered in its own full-width <Col> below the <PaymentButton>, so marginRight here won’t affect the label/button spacing. Consider removing this style, or switching to vertical spacing (e.g., margin-top) / colocating the label with the button if you need to adjust their relative positioning.

Suggested change

	<StatusLabel appearance="positive" style={{ marginRight: "1rem" }}>
	<StatusLabel appearance="positive">

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 48.30%. Comparing base (ba6f838) to head (eb7d35e).

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #16309   +/-   ##
=======================================
  Coverage   48.30%   48.30%           
=======================================
  Files          37       37           
  Lines        5912     5912           
=======================================
  Hits         2856     2856           
  Misses       3056     3056           

🚀 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.

[anthonydillon]

I know this is a design point of view but have we considered using help-text instead of a label which looks like a smaller button?

If you like this you can use this mark-up:

<div class="u-align--right col-4 col-start-large-9" style="display: flex;align-items: flex-end;gap:1rem;">
    <p class="p-form-help-text u-no-margin--bottom">Free trial on checkout</p>
    <button class="p-button--positive u-no-margin--bottom">Continue to checkout</button>
</div>

[abhigyanghosh30]

I know this is a design point of view but have we considered using help-text instead of a label which looks like a smaller button?

If you like this you can use this mark-up:

<div class="u-align--right col-4 col-start-large-9" style="display: flex;align-items: flex-end;gap:1rem;">
    <p class="p-form-help-text u-no-margin--bottom">Free trial on checkout</p>
    <button class="p-button--positive u-no-margin--bottom">Continue to checkout</button>
</div>

I was also looking at the chip component which might look better. @polgarp would be the best person to suggest what to do here

[polgarp]

@abhigyanghosh30 you are right! Status labels are deprecated and the recommendation is to use chips instead - also since this is a small piece of additional piece of information.