Skip to content

New design: remove the line under the top bar and align page content with the burger menu #8102

Open

Description

@renemadsen

Customer report

Menuer: Fjern den lodrette tynde streg under burgermenuen (se rød markering). Placer sideindholdet på linje med burgermenu, så vi bruger pladsen bedst muligt (se blå markering). Dette skal være gældende for alle sider i systemet.

(Raised before and still open.)

Current behaviour ("eForm new design" theme, every full-layout page)

  • A 1px line runs across the full width under the top bar; with the side menu open, the drawer also has a 1px right border and a shadow.
  • Page content starts noticeably to the right of the burger icon, because it is inset twice (card margin + card padding).

Where it comes from

  • eform-client/src/scss/components/_workspace-patterns.scss, "1. Top app bar": mat-toolbar.nav-header { … border-bottom: 1px solid var(--md-surface-variant); … padding: var(--spacing-md) var(--spacing-2xl); } (--spacing-2xl = 20px; the mat-icon-button in full-layout.component.html adds a 12px inset before the glyph).
  • Same file, "3c": .mat-drawer { border-right: 1px solid var(--md-surface-variant); box-shadow: var(--md-shadow); }.
  • eform-client/src/scss/themes/_workspace.scss: content-card-margin: 16px, used by .content-card { margin: var(--content-card-margin) } in full-layout.component.scss.
  • _workspace-patterns.scss, "3d. Page gutter": mat-drawer-container .content-card { padding: 8px 24px 24px; }.

Fix sketch (new-design theme only; Classic unchanged)

  1. Remove the nav-header border-bottom (decide with the designer whether the drawer border/shadow goes too).
  2. Align the content's left edge with the burger glyph: horizontal card margin 0 and card padding-left = toolbar padding + icon-button inset (20px + 12px), as one token so they can't drift; keep full-bleed views at 0.
  3. Check pages whose routed root adds its own padding (list next to section 3d).

Tests

Playwright (new-design theme): on the compliance report page and one plugin page, nav-header border-bottom-width is 0, and the left x of the first sub-header/filter element equals the burger mat-icon left x (±1px).

Related: #7935, #8061, #8065.

Activity

  1. renemadsen commented on Oct 3, 2026

    @renemadsen
    MemberAuthor

    Decision: apply to both themes (new design and Classic). Remove the line under the top bar and align the page content's left edge with the burger glyph on every full-layout page. The side drawer's border is not part of the request and stays.

  2. added 3 commits that reference this issue on Oct 4, 2026
  3. renemadsen commented on Oct 7, 2026

    @renemadsen
    MemberAuthor

    Verified on a staging installation with #8116 deployed: plugin pages (items-planning Plannings, backend-configuration Properties) have no line under the top bar, the content starts at the top, and the page gutter lines up with the burger — checked in both the Workspace and the Classic theme.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions