#771 Top level masonry refactor Pull request opened by FrankFlitton TL;DR Normalize how parts of pages are related in the DOM to allow for more reliable flex box behavior across screen sizes. Added a top level layout component that can be substituted in the registry. • Screen elements resize better with less UI cut off by the window. • Mobile nav for smaller screen sizes (ie tiling window manager, 1/2 a monitor). • Standardize flex/flex grid within the app to be more reliable. • Easier to make and maintain UI components and app pages - composable via MUI's

Grid

framework. Type ☑︎ Bug Fix ☑︎ Feature ☐ Plugin Are all requirements met? ☐ Code completed ☐ Smoke tested ☐ Unit tests added ☐ Code documentation added ☐ Any pending items have an associated Issue Complete description Refactored much of the top level code to separate the left nav from the router view. The UI is now flex box based with no top level components having fixed positioning. Nav is now programmatically shown and hidden via a context state (with animation). The current approach is hardcoding routes with a wrapper. During the refactor, it was discovered that the useProjects hook was using a cache system that would dump the payload when the route changed or a new project was selected. The components (left nav and main view) were remounted and created fresh caches on the route changes which masked the issue. Tracking Issue _Remove the '_fixes_' keyword if there will be multiple PRs to fix the linked issue_ fixes https://github.com/flyteorg/flyte/issues/ Follow-up issue NA flyteorg/flyteconsole GitHub Actions: Build & Push FlyteConsole Image GitHub Actions: Get Release Tag GitHub Actions: Generate Release GitHub Actions: unit_tests_with_coverage ✅ 5 other checks have passed 5/9 successful checks