#19 bug: add shop dialog

where user can add key url for the shop, the dialog overflows the screen and there is a non visible area in.

Fix the dialog

@fszontagh I'm starting work on this issue now! I'll investigate the "add shop" dialog that's overflowing the screen and fix the layout so all content is visible within the viewport.

Issue Analysis

I've identified the problem. The dialog component in IntegrationsContent.tsx uses a fixed max-w-3xl width, and the content inside (especially the WooCommerce connect component with extensive instructions) is overflowing the viewport.

The main issues are:

1. The dialog has no max-height constraint
2. No scrollable content area for overflow
3. The dialog content can extend beyond the viewport on smaller screens

Solution

I'll fix this by:

1. Adding max-h-[90vh] to constrain the dialog height
2. Adding overflow-y-auto to make the content scrollable
3. Ensuring proper padding and spacing so nothing gets cut off

Working on the fix now...

✅ Fixed!

I've successfully fixed the dialog overflow issue. Here's what was changed:

Changes Made:

1. IntegrationsContent.tsx - Updated the main dialog:

   • Added max-h-[90vh] to constrain dialog height to 90% of viewport height
   • Added overflow-y-auto to enable vertical scrolling when content exceeds the height limit

2. Connect Components (WooCommerce, Shopify, ShopRenter):

   • Removed redundant border and shadow from nested Card components to prevent double borders
   • Added shadow-none border-0 to inner Cards since they're already inside a bordered DialogContent

Result:

✅ Dialog now properly fits within the viewport on all screen sizes ✅ Content is fully scrollable when it exceeds the available height ✅ No more hidden/cut-off areas ✅ Cleaner visual appearance without double borders

The fix has been committed and pushed to the repository.

Commit: 022a2db - fix: add shop dialog overflow issue #19