Marketing text contents are being cut off

[pasimuno-ako]

Bug report

• I confirm this is a bug with Supabase, not with my own application.
• I confirm I have searched the Docs, GitHub Discussions, and Discord.

Describe the bug

In the Supabase website's Auth page, "Simple APIs" section, marketing text contents are being cut off based on screen size.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Go to Supabase Auth page.
2. Scroll down to "Simple APIs" section
3. See error on screen widths greater than 1024px.

Expected behavior

The marketing text should be fully visible.

Screenshots

System information

• OS: N/A
• Browser (if applies): Chrome (latest)
• Version of supabase-js: N/A
• Version of Node.js: N/A

Additional context

This line in the codebase:

supabase/apps/www/pages/auth/Auth.tsx

Line 140 in a25242e

<SectionContainer className="-mb-48">

Solution: Either remove the -mb-48 or add a new class sm:mb-0.

[Hallidayo]

Hi @pasimuno-ako - Thank you for opening, feel free to open a PR for a fix.

[H0onnn]

@Hallidayo @pasimuno-ako Hello ! Can I solve this issue ?

[Hallidayo]

@H0onnn - of course! feel free to open a pull request.

[akar016012]

I have fixed the issue and opened a new pull request

#26495

[pasimuno-ako]

@akar016012 Your solution works but is not ideal because adding the mt-20 simply negates the -mb-48 from the section above.

The ideal solution is to either remove the -mb-48 or add a new class to that element sm:mb-0 because it seems the negative margin is still being used on smaller screens (based on other pages' designs), but on desktop, the height of the text next to the code block are taller, so they get cut off.

[akar016012]

Or simple fix would be to just correct this type -mb-48 to mb-48.

[pasimuno-ako]

Or simple fix would be to just correct this type -mb-48 to mb-48.

No, because the negative margin is only used for small screens to achieve the effect of the code blocks being cut off by the next section's margin like this:

Which are also done on other pages without issues like in the Database page:

I updated my ideal solution recommendation in my previous comment above.

[akar016012]

Yes, so I fixed the typos in two places and it makes the mobile view even better

Before:

After:

[pasimuno-ako]

Actually, looking at the other pages beyond Database and Auth, it looks like the website is not consistent with when the code blocks get cut off by the section divider, so your solution may be adequate.

[Muhammad-Owais-Warsi]

Can i work on this issue ??

[H0onnn]

@Muhammad-Owais-Warsi This issue has already opened PR