🐞 Spells and trait containers don't appear to nest correctly

[miscoined]

Check for existing bug reports before submitting.

• I searched for existing Bug Reports and found no similar reports.

Expected Behavior

List entries which are part of the same spells block should correctly nest inside of a single <ul>, and that should be in a parent element with the CSS class for the linked property.

Trait entries which are part of the same traits block should correctly nest inside of a single parent element which should have the CSS class for the linked property.

The current behavior is both unexpected, and makes it difficult to style these elements with CSS.

Current behaviour

At the moment, for spells, the generated HTML output creates multiple top-level <ul>s - one for each spell level.

For traits, only the first trait element is contained within the .traits-container - the rest are sibling elements of the .traits-container. This means that it's difficult to apply custom CSS styling - eg if you wanted to make the traits inline.

The HTML looks like this:

Reproduction

1. Create a new vault
2. Install Fantasy Statblocks
3. Add a new Fantasy Statblocks layout by importing this JSON:

{"name":"Test Nesting","blocks":[{"type":"group","id":"8afa9bbaa9da","properties":[],"nested":[{"type":"spells","id":"4b99cb1b5a1b","properties":["spells"],"fallback":"-"},{"type":"traits","id":"196b188b485b","properties":["traits"],"fallback":"-","heading":"Heading"}]}],"id":"fadb9ad8fbc8"}

4. Paste this note:

```statblock
layout: Test Nesting
spells:
  - Description text
  - 1st: first spell, second spell
  - 2nd: another, one more
  - 3rd: third level spells
traits:
  - name: A Trait
    desc: A description for my trait
  - name: Another Trait
    desc: One more trait
  - name: Third Trait
    desc: Last trait description
```

5. Open the inspector
6. Observe that the generated HTML has each spell element in its own separate <ul>, and that the .traits-container div only contains the first trait and not the other two

Which Operating Systems are you using?

• Android
• iPhone/iPad
• Linux
• macOS
• Windows

Obsidian Version Check

1.6.3 1.5.8

Plugin Version

4.4.2

Confirmation

• I have disabled all other plugins and the issue still persists.

Possible solution

Looking at

fantasy-statblocks/src/view/ui/ColumnContainer.svelte

Line 390 in ea6853b

const component = new SpellItem({

, it looks like a new SpellItem is created for each spell, and that contains a top-level ul. Probably SpellItem should take in a list of items and have an each for the contained li.