Content interferes with toolbar functions in editor

[waridrox]

Please describe the problem (or idea)

What happened just before the problem occurred? Or what problem could this idea solve?

The writeup content of the post gets mixed up with the editor toolbar when scrolling or viewing content in general while making a post.

Please show us where to look

https://publiclab.org/

What's your PublicLab.org username?

waridrox

Browser, version, and operating system

Chrome v89

Possible solution could be to hide the transparency of the buttons and make them like the first half of the toolbar section so as to maintain the consistency.

Steps to reproduce the error

Here's how one can reproduce the error -

1. Click on share your work button to create a new post.
2. Move to content section and add a few paragraphs.
3. Scroll the page by placing the cursor outside the content section.
4. Witness the error

overlay.mp4

[waridrox]

Interestingly, I'm not able to reproduce the bug locally 🤔 Can someone pls confirm -

local.mp4

[TildaDares]

Can I work on this?

[waridrox]

@TildaDares sure 😄, go for it! 🚀

[TildaDares]

@waridox I was able to reproduce the error locally. I think a possible fix would be to make these buttons have an opaque background.

Before

After

What do you think?

[waridrox]

Yes, @TildaDares you're thinking in the right direction! We don't require transparency on those buttons with the content.

[eightballocto]

This can be accomplished by adding this rule:

.btn-light {
    background-color: white;
}

However, it should be noted that the Tags button is lacking the .btn-light class for whatever reason so more investigation is required.

[TildaDares]

@eightballocto The Toolbar already has a btn-light class but btn-outline-secondary is overriding it. Also I can't find this page in my local environment, can you please show me where it is?

[TildaDares]

Just to be sure these are the tags you're referring to.

[eightballocto]

@eightballocto The Toolbar already has a btn-light class but btn-outline-secondary is overriding it. Also I can't find this page in my local environment, can you please show me where it is?

using Inspect Element in my developer environment. It seems like these buttons are dynamically generated or from elsewhere. The "Tags" button I was referring to is in the toolbar, not the text field.

Edit/Addendum: I was also unable to find these elements in my local environment, hence my suspicion of it being in a separate repository or dynamically generated (which wouldn't make much sense, if you ask me)

[waridrox]

Hi all, @eightballocto is right and there's a different repository https://github.com/publiclab/PublicLab.Editor dedicated to the editor functionality and I recommend to take a look at publiclab/PublicLab.Editor#664 to anyone who is trying to come up with the fix. Thanks :)

[TildaDares]

@waridox How do I link this issue to my PR?

[Priyaraj17]

Hey, you just need to add the issue number in the PR template.