Elements broken in Playground

[nicholasess]

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

[marceloavf]

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?

[nicholasess]

@marceloavf Yes, this is the repository that i created.
https://github.com/nicholasess/docz-example/blob/master/src/components/Button.mdx#L21

[marceloavf]

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 ✋