Repository navigation
fix(theme): plugin page roots with their own side padding line up with the burger (#8102) - #8116
Merged
Merged
Conversation
…h the burger (#8102) The compliance report root (main.compliance-page, padding 20px) and pages whose routed root is a bare mat-card (backend-configuration task list and calendar task list, core CMS; 16px header/content side padding) started right of the burger glyph in both themes. The page-gutter neutralisers now drop that side padding and flatten the page-root card like the sub-header. The theme spec gets stand-in fixtures for these root shapes in both themes. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
There was a problem hiding this comment.
Copilot review overview
🟡 Changes recommended
The card selector unintentionally flattens unrelated routed-page cards.
Review effort: Balanced
Findings: 1
Open (1)
What changed in this PR
Aligns padded plugin page roots and bare card pages with the burger icon across both themes.
Changes:
- Neutralizes compliance-page horizontal padding.
- Flattens bare routed-root cards and adds Playwright coverage.
| File | Description |
|---|---|
_page-gutter.scss |
Adds page-root gutter normalization. |
application-settings.theme-new-design.spec.ts |
Tests alignment in both themes. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
…'s sole element (#8102) The bare-card rule also matched real cards that sit next to a sub-header or another card (folders, entity edit/create, visual editor) and stripped their border, radius and background. :only-child limits it to the task list, calendar task list and CMS root shape; the theme spec gains a sub-header + card host that must keep its surface. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Follow-up to #8109. On a staging installation, two backend-configuration pages still started to the right of the burger glyph in the new design: Compliance report (~49px) and Opgaveliste/task list (~45px). This PR lines up those page roots in both themes. The token
--page-gutter-xis 29px in the new design and 22px in Classic.Root cause
main.compliance-page. Its component style addspadding: var(--spacing-2xl)(20px), so the page starts at 29 + 20 = 49px.<mat-card><mat-card-content>. MDC adds 16px side padding to the card content, so they start at 29 + 16 = 45px. Classic also draws a border around the whole page. The core CMS page has the same root shape, with amat-card-headeras well.Change
_page-gutter.scss:.compliance-pageto the routed-root neutraliser list. Only the horizontal padding is removed.mat-card:not(.eform-sub-header). The card loses its border, radius and background (the same flat treatment as the sub-header). Itsmat-card-headerandmat-card-contentlose their side padding.Other backend-configuration, time-planning and items-planning page roots were surveyed. They already start with a sub-header or are already covered.
Tests
application-settings.theme-new-design.spec.tshas stand-in fixtures for three root shapes: compliance-page with its padding, a bare card, and a bare card with a header. Two new tests, one per theme, check:Not verified
Refs #8102
🤖 Generated with Claude Code