Skip to content

fix(ui): apply flexbox layout to headings #434

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
OverSamu wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

fix(ui): apply flexbox layout to headings #434

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f023c8c
fix(ui): apply flexbox layout to headings
OverSamu Mar 29, 2026
e3a4383
test(e2e): test multiline headings alignment
OverSamu Mar 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions quarkdown-html/src/main/scss/components/_heading.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@
color: var(--qd-heading-color);
margin: var(--qd-heading-margin);
text-transform: none !important;
display: flex;
align-items: flex-start;
Comment on lines +14 to +15

@devin-ai-integration devin-ai-integration Bot Mar 29, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔴 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;
}
Open in Devin Review

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

Comment on lines +14 to +15

@devin-ai-integration devin-ai-integration Bot Mar 29, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚩 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).

Open in Devin Review

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

@include font.global-font-family-with-main-fallback($kind: "heading");
}

Expand Down
4 changes: 4 additions & 0 deletions quarkdown-html/src/test/e2e/headings/multiline-alignment/main.qd
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.doctype {paged}
.pageformat width:{10cm} height:{5cm} margin:{1cm}

# A multiline title
8 changes: 8 additions & 0 deletions quarkdown-html/src/test/e2e/headings/multiline-alignment/multiline-alignment.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import {suite} from "../../quarkdown";

const {test, expect} = suite(__dirname);

test("multiline headings are aligned to the left", async (page) => {
const heading = page.locator("h1").first();
await expect(heading).toHaveCSS("display", "flex");
});
Loading