Remove horizontal scroll bar

[minkyngkm]

Done

• Replaced the <pre> and <code> element with <div> with styles
• Added _row-cli.scss file in static/sass for styles

QA

• Check out this feature branch
• Run the site using the command ./run serve
• View the site locally in your web browser at: http://0.0.0.0:8039/
• Run through the following QA steps
• Please check if the code snippet's animation is working well and it's responsive according to screen size

Issue / Card

Fixes #127

Screenshots

[webteam-app]

Demo starting at https://microstack-run-128.demos.haus

[bethcollins92]

I checked on an Iphone X screen and there was an ellipses in the command:

But this ellipses also happens on juju. @anthonydillon do you know if this is expected behaviour or if this is a bug?

[anthonydillon]

I see the same on my phone. Difficult to know really. Hiding any part of the command is bad. Maybe the command should wrap in small screens. Unless we can set the font size based on the vw.

[clagom]

+1, wrap the command line seems like a good option for small screens

[bethcollins92]

Thanks for the feedback @anthonydillon and @clagom, let me know when it's ready for a review again @minkyngkm (happy to pair if needed). I'll create an issue on jaas.ai too.

[minkyngkm]

Thank you @bethcollins92, @anthonydillon and @clagom 🙏🏻 . I have updated it. Hopefully it looks better! - demo

For your reference, I updated the line-height of the command line from 1rem to 1.2rem in case of the second line appearing on small screens. Please let me know if it's okay Beth :)

[bethcollins92]

Looks great @minkyngkm - good job!