Fix gradient color on onboarding for Spanish

[sejas]

Related issues

• Fixes pdtkmj-3a1-p2#comment-5977

Proposed Changes

• Fix gradient color for onboarding screen on Spanish

Testing Instructions

• Start Studio and change the language to Spanish
• Start Studio with no sites
• Observe the gradient covers all the words
• Try in different languages and observe the gradient looks good.

Before	After

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?

[katinthehatsite]

It looks good to me and the gradient works as expected:

I also tried in a couple more languages e.g. Russian and the changes look good there.

[fredrikekelund]

This change works, but it feels quite brittle to me. I played around with the text and found that setting line-height: normal on the L23 div moves the g descender inside the content box. It also increases the height of each row, so we need to compensate for that by setting a negative gap, margin or something.

I think it's worth the effort, though. This solution could easily break again down the line.

[sejas]

Thanks for the suggestion! I found that replacing leading-[42px] to leading-[48px] covers the word.
But in the end I've decided to just add a padding bottom and remove a gap-1, so the words stay at the same place.
Using the line-height (a.k.a leading- in tailwind) was better than my first approach, but I prefer this new solution (bae8de6) that doesn't use negative margings to force the positions.

[fredrikekelund]

The diff looks cleaner now, but we are still using an arbitrary value for the padding to make the gradient cover the entire g letter. For the record, the benefit of line-height: normal is that it adapts to the font—ensuring the entire letter stays within the content box.

Still, I acknowledge that it's unlikely this will come back and bite us anytime soon, so perhaps it's best to just land this PR and leave it this way for now. The solution definitely works 🙂