docs: fix overlapping of open in playground button
#17403
Conversation
✅ Deploy Preview for docs-eslint ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
amareshsm
added
the
accepted
|
Did you mean to also change this for mobile? It looks like this currently: |
| .incorrect, | ||
| .correct { | ||
| @media all and (min-width: 768px) { | ||
| pre.line-numbers-mode { | ||
| padding-bottom: 4rem; | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
Can we give the above style to all devices? so that I will fix the mobile view look also?
There was a problem hiding this comment.
It looks good if we give the bottom padding for the code block as 4rem and the playground button bottom as 1rem
There was a problem hiding this comment.
have kept the bottom position 1.5rem in PC size because it is touching the scrollbar in 1rem.
the overlapping issue is just seen in the PC size. so padding is added only for the screen size above or equal to 768px. |
In the mobile view, it is not overlapping but the UI doesn’t look good it looks odd. so we can fix the mobile view UI also. |
eslint-github-bot
bot
added
the
archived due to age
Prerequisites checklist
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)
The
open in Playgroundbutton is overlapping the code in PC size.And also overlapping the back to top arrow button.
So as a fix some padding is added to the code part.
And added
z-index: 1property to scroll up button.Is there anything you'd like reviewers to focus on?