Fix inconsistent alignment in Language button and Fix Story description overlapping footer contents, if description text is large

[prajwalkulkarni]

Issue Number

fixes #173 fixes #178

Describe the changes you've made

#173 Removed classes on <EOS_KEYBOARD_ARROW_UP />, <EOS_KEYBOARD_ARROW_DOWN /> components, along with the class on div that holds the string Language so that inconsistent margin/padding is eliminated.

#178 Replaced absolute viewport height of story page to 100% to contain the expanded story description and avoid overlapping and overflowing, and also setting the height to 100% ensures it occupies the full screen giving it the same behavior as 100vh.

Additionally, I've also reordered the properties of .options-bar class of home.scss prior to which the tests were failing due to incorrect lexical ordering of the class properties. Describe if there is any unusual behavior (Any Warning) of your code(Write NA if there isn't)

NA Additional context (OPTIONAL)

Test plan (OPTIONAL)

A good test plan should give instructions that someone else can easily follow.

Manual testing:

1. Head to the login screen, observe the language button and verify if there's a proper alignment between the arrow icon and the string.
2. Login and browse through different stories. If any story contains a longer description and is truncated, click on Show more and scroll all the way to the bottom. You should notice that the footer content is not overlapping any of the story components. Checklist

• [x] My code follows the code style of this project.
• [ ] My change requires a change to the documentation.
• [ ] I have updated the documentation accordingly.
• [x] All new and existing tests passed.
• [x] The title of my pull request is a short description of the requested changes.

Provide a Deployed link of route/page that needs to review

Preview: Deploy preview link here with the appropriate route