Class MJPageBodyInteriorComponent

<mj-page-body-interior> — Body-region sibling of <mj-page-header-interior>.

Paired primitive for sub-pages that render inside a left-nav workspace shell. Where <mj-page-body> is for top-level pages (sits inside <mj-page-layout>), this component is for sub-pages whose host element already has the flex-column layout (typically via _admin-patterns.css's :host rule or an equivalent).

Owns:

• flex: 1 so it fills the space below <mj-page-header-interior>.
• overflow-y: auto so the body scrolls (the host typically has overflow: hidden).
• Responsive padding: 16px on mobile, 24px at 768px+, 32px at 1024px+. Mirrors the bespoke .scrollable-content rules in packages/Angular/Explorer/explorer-settings/src/lib/shared/styles/_admin-patterns.css.

Background is fixed to --mj-bg-page to match <mj-left-nav-content>'s background (the typical parent in shell sub-page contexts). The interior chrome's own surface + shadow provides the visual delineation between chrome and body — no second background tone needed.

Escape hatches:

• [Padding]="false" — remove the gutter (e.g. when inner content owns padding).
• [Flex]="true" + [Direction]="'row'" — switch the body to a flex container so children with flex: 1 can grow (e.g. sidebar + content panes).

Example:

<mj-page-header-interior Title="Users" Subtitle="...">
  <div toolbar>...</div>
  <div actions>...</div>
</mj-page-header-interior>
<mj-page-body-interior>
  <!-- content; scroll, padding, background all handled -->
</mj-page-body-interior>
Copy

See Section 10 of plans/explorer-chrome-conventions.md for the full "interior chrome" contract.