Fixed a Bug in Padding of CSS in HomePage

[Aashish-Jha-11]

I've implemented adds specific spacing for carousel items when they have the slick-slide class applied. This ensures that-
Each carousel item has a margin 0 5px which provides 10px total spacing between items , The padding 2px is maintained for consistent internal spacing.

Closes #11036

Technical

Testing

Screenshot

Stakeholders

[Copilot]

Pull Request Overview

This PR fixes CSS padding/spacing issues for carousel items on the HomePage by adding specific margin and padding rules for slick carousel slides. The change addresses inconsistent spacing between carousel items by implementing a standardized spacing approach.

• Adds margin and padding rules for carousel items with slick-slide class
• Implements 10px total spacing between items (5px margin on each side)
• Maintains consistent 2px internal padding for carousel items

Comments suppressed due to low confidence (1)

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 17.02%. Comparing base (e027195) to head (cf0bc35).
Report is 292 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #11048      +/-   ##
==========================================
- Coverage   17.14%   17.02%   -0.12%     
==========================================
  Files          91       92       +1     
  Lines        4981     5021      +40     
  Branches      867      874       +7     
==========================================
+ Hits          854      855       +1     
- Misses       3588     3621      +33     
- Partials      539      545       +6     

☔ View full report in Codecov by Sentry.
📢 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.

[RayBB]

Please include screenshots.
Also, this change would seem to effect all carousel items not just the waitlist item. We should understand why just that one button was being effected and if this change will impact the other carousel button types.

[doct0r-furcation]

@RayBB found this to be the one way in which "Join Waitlist" does not share with other options -

The "form" button is not present for any of the other entries (These being link, and link.) ; is that a possible reason?

[mekarpeles]

If I remove the button from a form, I can confirm as @doct0r-furcation suggests that the carousel button renders correctly.

If I remove both classes from the form join-waitlist waitinglist-form the problem still occurs, so it is likely a property of the form or a combo of the form and the button.

Typically class cta-button-group has margin-top: 10px; but does not in the case of the form.

That's where I'd start.

openlibrary/static/css/components/book.less

Lines 3 to 7 in 3f2fde9

	.book {
	& > .cta-button-group,
	& > .cta-btn {
	margin-top: 10px;
	}

It seems likely the problem is

.book {
  & > .cta-button-group,
  & > .cta-btn {
    margin-top: 10px;
  }

applies directly to direct descendants and form causes this to be .book form cta-button-group.

So, what solution should we go with? We could try something like...

.book {
  & > form .cta-button-group,  
  & > .cta-button-group,
  & > .cta-btn {
    margin-top: 10px;
  }

[mekarpeles]

@Aashish-Jha-11 thank you for your effort in trying to help :)

@doct0r-furcation given you're assigned to this issue, would like to try to open the pull request and test the solution?

[doct0r-furcation]

@mekarpeles you got it!

[cdrini]

Closed in #11079 , thanks everyone!