Bug Report
Describe the bug
When I add a set of elements that are larger as the width of the playground, it breaks the element
To Reproduce
Enviroment
- OS: macOS High Sierra 10.13.4
- Node/yarn version: 8.5.0/1.6.0
nicholasess
All 3 comments
Hey @nicholasess, thank you for the feedback.
I was debugging it here and seems to be everything fine with the example.
Could you please provide an example code or repository for this bug, please?
marceloavf
on 2 Jul 2018
@marceloavf Yes, this is the repository that i created.
https://github.com/nicholasess/docz-example/blob/master/src/components/Button.mdx#L21
nicholasess
on 2 Jul 2018
It's an underised effect of css, the problem lies in that your a tags are display: inline (default browser) elements.
The links are cutted in a half because they are treated are normal text, not block-level elements.
You can set white-space: nowrap; to them but they will not be responsive as the screen resizes, so using display: inline-block; should fix the problem and make them real block-level links.
I hope this is what you are looking for ✋
marceloavf
on 3 Jul 2018
Related issues
mariusespejo
·
3Comments
meetromb
·
3Comments
mquandalle
·
3Comments
regrettably
·
3Comments
w0wka91
·
3Comments
Most helpful comment
It's an underised effect of css, the problem lies in that your
atags are display: inline (default browser) elements.The links are cutted in a half because they are treated are normal text, not block-level elements.
You can set
white-space: nowrap;to them but they will not be responsive as the screen resizes, so usingdisplay: inline-block;should fix the problem and make them real block-level links.I hope this is what you are looking for ✋