teambit / documenter Goto Github PK

In some components, we are seeing a large gap in the beginning of the docs.
This is because our headers have a margin-top associated to them.

The margin-top is there to create separation between paragraphs.

There are a couple of solutions we can take:

• disable margin-top for the first header, like so .mdx > { h1, h2, h3, ... { margin-top: 0} }
• remove margin-top and apply margin-bottom
• we can intelligently apply a sibling margin, like so p + { h1, h2, h3, ... { margin-top: 40px }}

Also check the case where setting a wrapper component:

Copy message looks a bit odd when on text.

It's dense and creates a visual load.

This is not the case without text in the background:

We can "fix" it by adding a shadow, that will increase the contrast:

(raised-low shadow)

(hower-lower shadow)

It also looks good without text in the background:

max-width: 100% is causing side effects for the react-playground.
I already overridden it for the playground, but it can still effect the html inside the live view.

We need some escape hatch to exclude it. The original rule is:

.mdxContent {
  * {
    max-width: 100%;
  }
}

maybe we can do something like this instead?

.mdxContent {
  :not(.excludeMdxMaxWidth) *, :not(.excludeMdxMaxWidth) {
    max-width: 100%;
  }
}

We can then apply the excludeMdxMaxWidth class on the playground.

It is generally better to avoid the :not operator, but this is the best I've got.

it prevents us from centering the code snippet.