SteemPlus - [2.17.5] - Comment or send comment button partially covered by floating bottom post bar

Project Information

Repository: https://github.com/stoodkev/SteemPlus/
Project Name: SteemPlus
Publisher: @stoodkev

Expected behavior

When the "Float Post's Voting Bar" option is enabled a user should still be able to view all of the comments on a post easily without any of the comment being hidden by the bar.

Actual behaviour

When the "Float Post's Voting Bar" option is enabled some comments are partially hidden by the floating post's voting bar. This only occurs when a post is viewed as an overlay rather than when the post is solely loaded as a post.

How to reproduce

1. From a fresh install download SteemPlus here
2. Complete the on-boarding flow and sign in via steemconnect
3. You will be redirected to Steemit.com (if you're already on the site, refresh to ensure the steemplus extension is working as expected)
4. Go to busy.org and sign in with your account.
5. Go to settings ensure you have “Float Post's Voting Bar” enabled within the settings shown in extensions pop up window, this should be enabled by default.
6. Go to the news feed and click on any post with a comment. The post should open in an overlay the new feed.
7. Scroll down the bottom of the page, you will see that either part of the comment will be covered up by the post.
8. Repeat step 6 with a post which doesn't have a comment and scroll to the bottom of the page, you won't be able to view the click the comment button easily as it's partially covered.

Note: The severity of this issue will be dependent on the size of the post and could also be affected by screen sizes.

Recording of issue

The following video shows the issue in more detail, it highlights both a post comment being hidden by the floating bar and the comment button is hard to press:

Environment

• Browser: Google Chrome (Version 65.0.3325.162 (Official Build) (64-bit))

• Device: MacBook Pro (Retina, 15-inch, Late 2013)

• Operating system: MacOS HighSierra Version 10.13

• Application Version of Testing: Version: 2.17.5 (Updated: June 22, 2018)

Note: This was originally tested on version 2.17.4 and I have retested on version 2.17.5 and the same issue occurs, with the same behavior so no further edits need to be made to this contribution.

Issue Resolution

As the floating post bar has a static height, this can be resolved by adding additional CSS to .ant-modal-body, this can be resolved by adding a margin-bottom: 110px to this class. This could be added via Javascript within post_floating_bottom_bar.js or alternatively via straight CSS as I don't think it currently has a CSS file I chose js as I only wanted it to occur when the setting was enabled to prevent an unneeded margin when it wasn't being used, thus creating a negative experience on busy.org. I added the following on line 107 of post_floating_bottom_bar.js and it worked as expected.

Proof of work

My GitHub account: https://github.com/tobias-g1
The issue has been reported here: https://github.com/stoodkev/SteemPlus/issues/109

Pull Request (Update: 26th June 2018)

Following this post, this issue has now been acknowledged by the developer and I have sent a pull request was has been merged:

https://github.com/stoodkev/SteemPlus/pull/112

however it seems that I made an error and wrote margin-top instead of margin-bottom, I have sent another pull request here:

https://github.com/stoodkev/SteemPlus/pull/114

This issue is still present in 2.17.6