docs: place the playground button in the bottom right corner

[kecrily]

Prerequisites checklist

• I have read the contributing guidelines.

What is the purpose of this pull request? (put an "X" next to an item)

[x] Documentation update
[ ] Bug fix (template)
[ ] New rule (template)
[ ] Changes an existing rule (template)
[ ] Add autofix to a rule
[ ] Add a CLI option
[ ] Add something to the core
[ ] Other, please explain:

What changes did you make? (Give an overview)

Removes large white space from the code block.

Before	After

Is there anything you'd like reviewers to focus on?

[netlify]

✅ Deploy Preview for docs-eslint ready!

Name	Link
🔨 Latest commit	b5a5d51
🔍 Latest deploy log	https://app.netlify.com/sites/docs-eslint/deploys/657c7c8f5cf72c00070f5bb6
😎 Deploy Preview	https://deploy-preview-17848--docs-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[nzakas]

It does look a bit better this way, but I think we'll need to adjust the styles in light mode:

I think the button needs a shadow or border to help make the edges clearer

[kecrily]

Is that okay?

[fasttime]

I can see that after this change there will be extra empty space after all code blocks, even if there is no Playground button:

Now	After

Is this intended?

[mdjermanovic]

IMO, it looks better when the button is in the code block. Also, if the button is over the border, when the horizontal scroll bar appears (usually it does on small screens, e.g. mobile), the button will overlap with it:

[kecrily]

Is this intended?

@fasttime Yes, to avoid overlapping with other content on a small screen. But it shouldn't be found in a normal code block. now adjusted.

IMO, it looks better when the button is in the code block. Also, if the button is over the border, when the horizontal scroll bar appears (usually it does on small screens, e.g. mobile), the button will overlap with it:

@mdjermanovic I fixed it. The scrollbar now no longer overlaps the buttons.

[Tanujkanti4441]

in my browser i have different scrollbar is it looking fine?

[kecrily]

in my browser i have different scrollbar is it looking fine?

There's nothing wrong with its position, but it doesn't look very good. Do I need to adjust these scrollbars to macOS-like thin scroll bars?

---

Sorry for accidentally closed.

[harish-sethuraman]

I feel like something like this on hover would be better with help text open in playground probably?

we could use something like this to denote correct and in correct instead?

end output would be somewhere close to this? (😅 edited entire thing in inspect tools design could be better).
Why I'd prefer something like this is because,

• we show a link to playground when we hover on code sample so it doesn't obstruct the view?
• the correct in correct doesn't float anymore and lives more with the code block itself

[Tanujkanti4441]

i like the last design and instead of keeping that playground button in the code block we can place it to the correct/incorrect block with the playground name.

[nzakas]

This PR was just to move the button -- there's no good reason to change the overall design of the correct/incorrect code examples. If we can't agree on moving the button, then we should just close this PR.

[Tanujkanti4441]

if we shift the button to the bottom right corner we will end up with the same overlapping problem which we had previously

[amareshsm]

if we shift the button to the bottom right corner we will end up with the same overlapping problem which we had previously

Yes we need to consider. Boz of this issue we decided to place the button inside the block in #17403

[kecrily]

Back to top button is floating. It does not interfere with reading, just slide up or down. And even if don't move the button to the bottom right corner, it still overlaps the correct/incorrect icon.

[Tanujkanti4441]

Back to top button is floating. It does not interfere with reading, just slide up or down. And even if don't move the button to the bottom right corner, it still overlaps the correct/incorrect icon.

comment, as per this comment it is okay if button overlaps the things which can't be clicked.

[kecrily]

Is this OK?

[nzakas]

Folks - this discussion has been going on for a while, so my vote is just to leave the button as-is. If it was an easy fix, that would be one thing, but we're continuing to run into edge cases and I just don't think it's worth the effort to continue down this path.

Thoughts?

[harish-sethuraman]

I'd also vote on keeping the same layout 👍🏻

[nzakas]

All right, let's just keep what we have. I appreciate the suggestions and work, but let's move on to more interesting problems. :)