Fix overflow-x on AppContent

[filip-codes]

Reason for the PR

In every new project, I make a small but essential change: I set overflow-x-hidden on AppContent.

Why?

Components like shadcn/table can cause unexpected horizontal scrolling on dashboard.tsx. To ensure a smoother experience, I want only the AppContent to be scrollable—without affecting the entire layout.

Before (Desktop)

Screen.Recording.2025-03-22.at.20.57.13.mov

After (Desktop)

Screen.Recording.2025-03-22.at.20.55.05.mov

Before (Mobile)

Screen.Recording.2025-03-22.at.20.58.51.mov

After (Mobile)

Screen.Recording.2025-03-22.at.21.00.07.mov

[tnylea]

Thanks for the video examples. I just tested it out, and everything works fine with that overflow class. Approved 👍

[tnylea]

Hey @filip-codes, On second thought, I feel that this PR, #90, will be better suited to handling tables and other UI elements that have a large width.

Can you let me know if adding the max-w-full to the <main> element in the sidebar layout resolves the issue you were seeing as well.

Thanks!

[filip-codes]

Hey @tnylea, thanks for your response!

I’ve looked into #90, which fixes the max-width issue on the sidebar when variant="inset".

This PR addresses a different issue: when scrolling horizontally, the header disappears behind the navigation bar due to overflow-x. I tried setting max-w-full on the <main> element, but it didn’t seem to have any effect.

[filip-codes]

Here's the result with max-w-full set on <main>:

Screen.Recording.2025-03-31.at.22.39.01.mov

Please compare it with the "After" results above. (The header does not move)