fixes issue-1180 fixes the post padding for mobile devices found in timeline.jsx

[pyvelkov]

Issue This PR Addresses

Fixes #1180

Type of Change

• Bugfix: Change which fixes an issue
• New Feature: Change which adds functionality
• Documentation Update: Change which improves documentation
• UI: Change which improves UI

Description

I traced how the padding was being applied through Chrome developer tools. I saw that the default root padding was being applied meaning the posts have padding to the left and right and were not being overridden as expected. From the previous fix that was made I saw that root style was being overridden with a padding of 0 in posts.jsx but since the change in #1217 , timeline.jsx was created and that is where the issue stemmed from. I saw that the Timeline function was returning the wrapped array in a container that had the className={classes.root}. However custom overriding of the root style was not being called in "useStyles".

Before

After

EDIT:
I believe this also fixed #1226

I also ran npm run test and everything passed. Everything looks alright on my end.

Let me know what you think and if this is what we are after in #1180 , my JS is terrible and I probably spent far longer than needed for something like this. I hope it is what we are after.

Checklist

• Quality: This PR builds and passes our npm test and works locally
• Tests: This PR includes thorough tests or an explanation of why it does not
• Screenshots: This PR includes screenshots or GIFs of the changes made or an explanation of why it does not (if applicable)
• Documentation: This PR includes updated/added documentation to user exposed functionality or configuration variables are added/changed or an explanation of why it does not(if applicable)

[humphd]

I'm not sure if we should deal with this here or in another issue, but I also notice we have an overflow problem on mobile with content extending beyond the parent container(s):

[pyvelkov]

I'm not sure if we should deal with this here or in another issue, but I also notice we have an overflow problem on mobile with content extending beyond the parent container(s):

I don't mind doing this in another post but I can do it here. I sort of found a fix by applying style ofoverflown content to auto and it added a scroll like effect for posts like this.

[humphd]

Sure, push another commit and let's do it here.

[pyvelkov]

Sure, push another commit and let's do it here.

I just added the commit that adds the scrollbar for overflown posts. Let me know, Thanks :)

[cindyorangis]

Thanks a lot for fixing this

[c3ho]

@pyvelkov Feel free to squash and merge

[pyvelkov]

@pyvelkov Feel free to squash and merge

would you like me to do it, or..?

[humphd]

@pyvelkov go for it! With 2 reviews giving an approval, you can squash and merge.