fix: give generated Angular apps a page-layout shell - #57
Merged
Conversation
Generated apps rendered every routed page flush against the viewport edges. Most routed surfaces are library components mounted by FormioResourceRoutes() / FormioAuthRoutes() — create, edit, delete, index, login, register — so the app shell's <router-outlet> wrapper is the only layout boundary that reaches them. Two files specified the shell and disagreed: AUTH.md (which writes it) had no wrapper, while app-integration.md (consulted later, after skip-if-already-wired) had one. The unwrapped version always won. - AUTH.md is now the single source of truth for the shell. Its block wraps <router-outlet> in a page-layout element with a design-language-dependent class slot; Bootstrap 5, Tailwind, Material, existing-design-system, and unstyled realizations are listed as illustrations, not as the normative requirement. - Add a "Page layout contract" section: the shell owns page gutters, max content width, and top spacing in every design language, and page templates must not add their own page-level wrapper — that double-pads the routes you control while leaving the library-rendered ones unpadded, masking the gap. Restated in resource-module-patterns.md, whose per-design-language note now opens with the contract holding in every language. - Delete the competing shell HTML from app-integration.md; point at AUTH.md and keep only the two edits that belong there. - Split the shell layout (required) from nav chrome (recommended) in the AUTH heading, approval gate, and parent SKILL.md phase goal. - Add a Page shell bullet to the BOOTSTRAP Step 7d design brief, note that the brief's requirements are normative while its Bootstrap vocabulary is substitutable, and list page layout as a user-facing surface. - Add a Phase B closing check to formio-angular-resources: load /<resource>/new and /auth/login and confirm the content sits inside the shell's gutters, or disclose plainly that nothing was rendered. - Lead with Angular 20+ file naming (app.ts / app.html / app.scss, class App, singular styleUrl), keeping legacy names parenthesized. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Follow-up fixes to the shell-wrapper work in this branch, from a review of the eight markdown files it touches. - AUTH.md's skip-if-already-wired gate only inspected auth wiring, so an app generated before AUTH owned the shell (auth wired, bare <router-outlet>) would skip the phase and never get the wrapper. Add a sixth condition requiring the shell template to wrap <router-outlet> in a page-layout element. - The navbar skeleton paired a full-bleed <nav> with a centered container-xxl <main>, so the brand and the content did not share a gutter at wide viewports despite the note claiming they did. Give the navbar an inner container-xxl px-3 px-md-4 and correct the note, the contract sentence, and BOOTSTRAP's design-brief bullet. - The shell HTML deleted from app-integration.md was the only definition of the navbar's left-hand <ul class="navbar-nav me-auto">, which the surviving resource-link instruction still referenced. Ship the empty insertion point in AUTH.md's skeleton and name it (plus a fallback for hand-written navbars) in app-integration.md. - Fix app-integration.md's AppModule snippet to import ./app-routing-module, matching the rest of the skill. - Drop a stray </nav> from AUTH.md's illustrative contract snippet. - Update BOOTSTRAP.md's Step 7d prose to app.html (legacy filename parenthesized). - Rewrite app-integration.md section 6 for the widened design-language options; it still branched on a "none" choice the interview replaced. - Add the legacy filename to the Phase B closing check in formio-angular-resources/SKILL.md. Co-Authored-By: Claude Opus 5 (1M context) <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
1 participant
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.
Generated apps rendered every routed page flush against the viewport edges. Most routed surfaces are library components mounted by FormioResourceRoutes() / FormioAuthRoutes() — create, edit, delete, index, login, register — so the app shell's wrapper is the only layout boundary that reaches them. Two files specified the shell and disagreed: AUTH.md (which writes it) had no wrapper, while app-integration.md (consulted later, after skip-if-already-wired) had one. The unwrapped version always won.