Large whitespace between headers

[hlascelles]

We are seeing, on big screens, very large gaps between headers. We are using no other CSS at all, an just the vanilla redoc js. This is different to https://github.com/Redocly/redoc/issues/874 in that that appears to be for MD screens, whereas we see this on all screens.

Affects (at least) [email protected] - [email protected]

Example:

The relevant HTML section:

To fix it we have to use:

  <style type="text/css">
    /* Remove excessive whitespace between headers */
    .dluJDj {
      padding: 0 0 !important;
    }

    .hiuczA {
      padding: 0 0 !important;
    }
  </style>

But given these class names are unstable this is not a permanent solution.

[huksley]

I was experiencing the same issue, I solved it by having my own redoc.html and using theme option, see https://github.com/Redocly/redoc#redoc-options-object

<script>
      Redoc.init(
        'specs/spec.yml',
        {
          theme: {
            spacing: {
              sectionVertical: '5px',
            }
          },
        },
        document.getElementById('redoc-container')
...

[rs-wilson]

Unfortunately, the "ability to simple branding/styling" is on the roadmap (per redoc's README), but in the mean time, theme.ts has some other properties. Specifically, I've had luck setting the typography.headings.lineHeight to a slightly lower value:

{
  "noAutoAuth": true,
  "hideDownloadButton": true,
  "theme": {
    "spacing": {
      "sectionVertical": "35"
    },
    "typography": {
      "headings": {
        "lineHeight": "1.2em"
      }
    }
  }
}

This is the json blob I'm passing into the cli via options, or into the Redoc.Init() call.

[CoenraadS]

Just encountered this myself, adding my magic spells to the list:

.hutltu {
    padding: 10px 0 0 40px !important;
}

.hutltu h1 {
    line-height: normal;
}