fix(ui): apply flexbox layout to headings

[OverSamu]

• I confirm an issue for this change exists.
• I have read the contributing guidelines.
• I have tested the changes locally.
• (Optional) I have added necessary documentation to docs and CHANGELOG.md

Closes #433.

In Playwright tests I tried to verify that the bounding boxes of the ::before pseudo-element and the inner text did not overlap, but I was unsuccessful as the browser does not appear to expose the ::before element.

---

[devin-ai-integration]

Devin Review found 2 potential issues.

View 1 additional finding in Devin Review.

[devin-ai-integration]

🔴 display: flex on headings breaks text-align: center in slides documents

Adding display: flex to all headings (h1–h6) causes text-align inheritance to no longer control the positioning of heading content. In slides documents, _alignment.scss:39 sets --qd-horizontal-alignment-global: center, which the .quarkdown root inherits as text-align: center (_alignment.scss:2). With display: block (the previous default), this centers the inline text within each heading. With display: flex, text nodes become anonymous flex items whose position is governed by justify-content (defaulting to flex-start), so heading text will appear left-aligned instead of centered. This regression affects slides using the minimal and hyperlegible layout themes (which do not override slides alignment to start). The latex and beamer themes are unaffected because they explicitly set --qd-horizontal-alignment-global: start for .quarkdown-slides.

Fix suggestion

Either scope display: flex to only non-slides documents, or add a compensating rule for slides that sets justify-content: center on headings. For example:

&.quarkdown-slides #{$headings} {
  justify-content: center;
}

---

Was this helpful? React with 👍 or 👎 to provide feedback.

[devin-ai-integration]

🚩 display: flex may affect heading numbering layout via ::before pseudo-elements

In _location.scss:12-14, heading numbering uses ::before pseudo-elements (e.g. "1.2 "). With display: flex, these ::before pseudo-elements become flex items alongside the heading text. This is likely the intended motivation for this change (to align multiline heading text with the numbering label using flex-start). However, it's worth verifying that the ::before numbering still looks correct across all layout themes (especially latex.scss:43-45 which adds padding-right: 0.85rem to the location heading ::before).

---

Was this helpful? React with 👍 or 👎 to provide feedback.

[iamgio]

I actually attempted the same thing in #25 long time ago. Along with what the bot pointed out, flex is a bad layout for a heading because you can have inline formatting in it:

# First _second_

<h1>First <em>second</em></h1>

Without flex (pre-PR):

With flex:

As you can see, flex sees First and second as layout cells, rather than text, so it ignores the whitespace between them.

The heading tag shouldn't have a flex layout. I can see something like this at rendering level though:

<div style="display: flex">
  <div class="heading-location">::before</div>
  <h1 data-location="1">Title</h1>
</div>

Instead of the current:

<h1 data-location="1">
  ::before
  Title
</h1>

(Note that by ::before I mean the location content set by _location.scss).

Keeping this PR open, feel free to close or update it as you wish.