Description
In the generated Angular app, the navigation drawer and the main routed content are rendered as sibling elements, but the root app container does not define a layout that places them side by side.
Because of this, the browser uses the default document flow and stacks them vertically instead:
- the drawer appears first
- the main page content is rendered below it
This makes the app shell look broken and does not match the expected layout.
Proposed Solution
The fix is in styles: the root app container should use a two-column layout so the drawer stays on the left and the main content stays on the right. The main content area should also include min-width: 0 and min-height: 0 so pages shrink and scroll correctly without overflow issues.
Description
In the generated Angular app, the navigation drawer and the main routed content are rendered as sibling elements, but the root app container does not define a layout that places them side by side.
Because of this, the browser uses the default document flow and stacks them vertically instead:
This makes the app shell look broken and does not match the expected layout.
Proposed Solution
The fix is in styles: the root app container should use a two-column layout so the drawer stays on the left and the main content stays on the right. The main content area should also include min-width: 0 and min-height: 0 so pages shrink and scroll correctly without overflow issues.