fix(home): prevent text clipping in onboarding cards

[Armansiddiqui9]

Closes #12854

Fix: Text clipping in onboarding cards on mobile

Technical

• .tutorial__item a used a fixed height (100px)
• Flex layout relied on rigid sizing instead of content-aware sizing
• Long text (especially translations) overflowed and got clipped

Testing

This PR includes a more robust refactor of the onboarding card layout (moving from fixed-height + float-based layout to a flex-based responsive layout).
Because several legacy layout rules were removed, this change should be visually verified across:

• Mobile (especially iOS Safari)
• Narrow viewport widths
• Carousel behavior on desktop
  If any regressions are found, a minimal fallback fix is available:
• Reverting height to min-height adjustment only
• Keeping existing structure with minimal flex changes

This ensures the fix can be safely adjusted without blocking the bug resolution.

Screenshot

With language as English, it looks totally perfect

With another language the width of boxes increases

On mobile view width it

Stakeholders

@lokesh

[mekarpeles]

Thanks for the PR!

🤖 Copilot has been assigned for an initial review.

The linked issue (#12854) hasn't been triaged yet — triage happens on Mondays and Fridays. There are currently 72 open non-draft PRs ahead of yours.

PR triage checklist (maintainers / Pam)

• PR description — not empty; explains what the change does and how to verify it
• References an issue — PR body contains a #NNN reference
  • Linked issue is triaged — has a Priority: * label (not just Needs: Triage)
  • Linked issue is assigned — has at least one assignee
• Commit history clean — no WIP/fixup/conflict noise; commit messages are meaningful
• CI passing — no failing check-runs
• Test cases present — if the change touches substantive logic, test coverage exists or is explained
• Proof of testing — PR body includes a description of what was tested, a screenshot, or a video

Note

This comment was automatically generated by Pam, Open Library's Project AI Manager, on behalf of @mekarpeles. Pam is designed to provide status visibility, perform basic project management functions and relevant codebase research, and provide actionable feedback so contributors aren't left waiting.

[Copilot]

Pull request overview

This PR aims to fix text clipping in the homepage onboarding carousel cards (especially on mobile / with longer translated strings) by making the card layout content-aware instead of fixed-height/float-based.

Changes:

• Updates onboarding card layout rules to use flex sizing and allow the link container to grow (height → min-height, add gap, prevent flex overflow via min-width: 0).
• Adjusts text styling to remove percentage-based margins and improve wrapping behavior for long strings.
• (Unintended) Removes a large set of homepage CSS rules that appear to still be required by other homepage sections (Stats + About/Resources).