Skip to content

Nesting an alert inside a list, inside tabs, can break the page layout

In the feedback round, Fiona found a major layout problem, which looked something like this:

image

This page was adjusted in this commit and does display properly now, but we need to address the underlying cause so that it's not possible to break the site with what seems like valid markdown/shortcodes.

You can reproduce the problem like this:

  1. Create a new test page, like content/yikes.md
  2. Copy the markdown from this example onto the page: snippet
  3. Load the page at http://localhost:1313/yikes, and you should see the layout break similar to the example above. If you add a second nested-nested alert, it gets worse.

Alerts work in tabs outside of the list, and alerts work in lists, and nested lists, but there's something bad with the tabs-list-alert stack. Seems like something doesn't close a div tag.

Works fine: alert in a list, nested in another list
- Just
- a list
- with an alert

  {{< alert type="note" >}}

  If you used a configuration volume other than `/srv/gitlab-runner/config`
    during installation, update the command with the correct volume.

    {{< /alert >}}

- more list
- this is fine
  - how about nesting
  - okay
  - how about an alert here?

    {{< alert type="note" >}}

  If you used a configuration volume other than `/srv/gitlab-runner/config`
    during installation, update the command with the correct volume.

    {{< /alert >}}

  - we good

If we can't support this, that's OK for now, but in that case we'd still need to throw an error of some sort if someone attempts to use what we've determined is invalid markdown.

Possibly related: #87 (closed)

Edited by Sarah German