Nested lists have too much whitespace between items

[Xavier Vello]

Bug Report

Environment

Zola version: 0.17.2
tabi commit: 0b6cb31

Expected Behavior

See reproduction case and screenshot below. Zola supports the markdown syntax where adding an empty line between list items creates more space between items. This is achieved by adding a <p> element in the <li>, which creates proper spacing in the nominal case thanks to the margin-bottom property on <p>.

It does not play nice with nested lists though, as there's too much space between the main item's <p> and the sub-item <ul>. In that case, I expect no spacing (or a small spacing) between these elements, while still having proper spacing between the sub-items and the next top-level item.

Not sure whether the fix is a CSS fix in tabi or a code fix in zola though.

• for now I'm working around it by wrapping the list in a div and adding the following style: article div.compact-list p { margin-bottom: 0.4rem; }
• ideally, we'd fix it with a li p:has( + ul) selector (to neutralize the margin if a p's next sibling is a ul), but this does not work yet on Firefox
• or the margin should be set on the <li> element, but only in these "spaced-out lists" cases. Again, that would require a li:has(p) selector that does not work everywhere?
• best option to me would be to neutralize the margin on li p, and add one on article li :last-child (to match the last element of li's, even if it's the ul)

Current Behavior

Tell us what happens instead of the expected behavior.

Step to Reproduce

# Lists with no spacing are unaffeced

1. first item that needs no context
2. second item that needs details:
    - step 1
    - step 2
3. last item

# Lists with spacing are affected

1. first item that needs no context

2. second item that needs details:
    - step 1
    - step 2

3. last item

Generates the following markup

<h1 id="lists-with-no-spacing-are-unaffeced">
  <a aria-label="Anchor link for: lists-with-no-spacing-are-unaffeced" class="header-anchor no-hover-padding" href="#lists-with-no-spacing-are-unaffeced">
    <span aria-hidden="true" class="link-icon"></span>
  </a> Lists with no spacing are unaffeced
</h1>
<ol>
  <li>first item that needs no context</li>
  <li>second item that needs details: <ul>
      <li>step 1</li>
      <li>step 2</li>
    </ul>
  </li>
  <li>last item</li>
</ol>
<h1 id="lists-with-spacing-are-affected">
  <a aria-label="Anchor link for: lists-with-spacing-are-affected" class="header-anchor no-hover-padding" href="#lists-with-spacing-are-affected">
    <span aria-hidden="true" class="link-icon"></span>
  </a> Lists with spacing are affected
</h1>
<ol>
  <li>
    <p>first item that needs no context</p>
  </li>
  <li>
    <p>second item that needs details:</p>
    <ul>
      <li>step 1</li>
      <li>step 2</li>
    </ul>
  </li>
  <li>
    <p>last item</p>
  </li>
</ol>

[Xavier Vello]

Found a better solution while writing the issue: the following CSS gives the expected layout:

article li p {
    margin-bottom: 0;
}

article li :last-child {
    margin-bottom: max(2.3vmin,24px);
}

[Óscar]

Hi Xavier,

Thanks for reporting this.

Found a better solution while writing the issue

Does this solution change the appearance of lists without spacing? If everything else remains the same, could you do a PR?

Thanks!

[Xavier Vello]

Does this solution change the appearance of lists without spacing? If everything else remains the same, could you do a PR?

It should not, as lists without spacing are simple <li>the text</li> lists. I'll triple check and open a PR.

[Xavier Vello]

When I do this PR, should I factor this margin-bottom: max(2.3vmin,24px); value from p into a variable, so that it stays in sync?

[Óscar]

When I do this PR, should I factor this margin-bottom: max(2.3vmin,24px); value from p into a variable, so that it stays in sync?

Yes, please.