Some UI bugs encountered on Steemit replies

Getting to lengthy conversations on Steemit is rare. Often, when such conversations occur, we continue them on the Steemit chat or on Discord. Yesterday though, I had a conversation with @roxane on one of my posts and came across some UI bugs mostly related to the replies nesting. Here are the 3 bugs I managed to find while chatting with her.

Those bugs were tested on a big part of known web browsers (Chrome, Firefox, Opera, Vivaldi, IE and Edge more precisely). I didn't have any extension installed that could have messed up Steemit's UI. If you want to quickly test the bugs presented in this post, you can simply click here to be redirected to the post I found those bugs on. I have tried with other posts containing lengthy conversations and the same things happened.

There is a significant chance that you have never even realized there were dots on Steemit in front of every replies to help you understand which comment an user replied to. Those work fine until a conversation is too long and requires you to click a "Show X more replies" link to see the rest. I suspected this to be linked to the problem but it turned out to not be the case as you will soon see.

As you can see, a dot is missing on the far left of my reply. At first, I thought it was a problem with the depth but it doesn't seem to be (@roxane's comment has a depth of 7 while mine is 8). Then I thought that maybe all the dots exist but one is hidden somewhere so I inspected the page with Google Chrome and indeed it was. If I hide my profile picture with the CSS property display: none, here's what it looks like.

Now all the dots are visible. This means that they are either all misplaced by one step or that the one that should be on the far left isn't placed and therefore stays where it is "created". The second guess is the right one. While inspecting the styles of each dot, I saw that the hidden one didn't have a left property assigned. By quickly adding left: -410px to its styling (which is the left property of the dot just after it (.di-6) minus 62px (the space between each dot)) and by displaying my profile picture again, I got to what it should look like.

It seems that they forgot to add styling for this dot class (.di-7) or that they added it but made a typo in the stylesheet. The same happens for the thin version of Steemit which has 20px between dots, so fixing it on this version would be adding left: -120px to the .di-7 dot.

This one is related to the first bug in some way. I'm not sure if it's an UI bug but it doesn't feel right. The profile picture and the dots aren't centered on the same line. Additionally, the logic of having a profile picture at the same X position as the text of the comment replied to is ruined.

Both problems are because of the padding added to highlighted comments. When a comment is highlighted, it is added a class of .highlighted. This class gives borders and background colors to the comment (colors vary depending on the website theme) but also adds a padding of 14px. If I remove the padding, it looks like that.

Now, I think we can all agree that it doesn't look good either BUT it suits the overall appearance of comments relative to eachother. I believe there should be a 14px padding but the comments structure should be respected. I experimented a bit to see what I could do to try and fix that problem. I put the padding back to 14px and added a position: relative property to the .highlighted class. Then, I simply added the properties top: -15px and left: -15px (14px for the padding and 1px for the border). It came up like that.

I like it way better that way, even though it creates a problem that I didn't want to deal with in the Inspect window of Google Chrome. The problem being that the space between the "Show X more replies" link and the comment itself is bigger by 15px after those changes, which actually makes sense.

I have no clue on how to fix this one so I will just report it. If I want to see more replies by clicking on the "Show X more replies" link, it will redirect me to the correct page. However, as you can see in the following gif (sorry for the Gyazo quality), it shows the upvote button as clicked even if you have not upvoted the reply you get redirected to. It is simply an UI bug since refreshing the page will show it correctly.

Interestingly enough, this bug only happens if you are connected on Steemit so it probably has something to do with them checking if a user is connected and then putting the upvote as clicked without even checking if it was actually upvoted, but it's only a guess.

There we go, those were the three UI bugs I found. I'm happy to have found fixes for two of them so someone else can fix them in a pull request (I don't have the time for it right now). If nobody creates a pull request for those, I guess I will try to do it myself when I have the time for it.