"Container" component renders a tr with grid styles

[AsafAgranat]

Thank you so much @cmjoseph07 for keeping this framework alive!

Below is an issue that exists in the latest codebase from svelte-email.

When using Container, the inner wrapping <tr> receives a display:grid. This creates a wonky layout that never gets centered. This is not hapening in the docs examples (svelte-email), which makes me think that the docs are not using the latest codebase. I'm not sure where this is coming from, but it makes Container kind of unusable.

UPDATE ok, so the grid styles come from Section component, which when placed at root level (as exemplified in the docs) plays badly with a directly nested Container. I removed the wrapping Section and used a Container as root, and it works well now.

The image below is using the AirBnb example from the docs. When I use it locally, I get the grid styles added:

and the result is uncentered content:

[cmjoseph07]

@AsafAgranat

Okay, so what are you thinking? We could just update the example or do you want me to look into Section further?

From a brief look at the code it is a table that slots everything inside of it into a tr which is of grid layout. I am leaning towards simply adjusting the example and advise not using is as the outer 'main' element?

[AsafAgranat]

Hi @cmjoseph07 . I apologize for the late response - I was away and too buried at work. Thank you for looking into the issue. I think updating the example is right course to take here. Removing the rootSection should suffice. At least that's what I did on my local.

[cmjoseph07]

@AsafAgranat

Okay I removed the root Section from the Airbnb example in the codebase. I also added a REPL with this change/example so people will have something to try out moving forward. New docs will be required eventually but this such be okay for the time being.