[Maintenance] - Fix Horizontal Stretch for Pages With Sidebar Opened

Description

There is, on rare occurrence (depending on what page you are on), an issue where the right main page prop stretches into the right side causing a scroll frame to occur, therefore not fitting the page length to the window size:

As seen above, this happens regularly with the Gantt Chart page and is easily reproducible there.

On the not so easily reproducible side, it happens also on the Calendar page as seen below:

Please remember that this primarily happens when the sidebar is already opened and there is a switch to another page (as far as my testing can tell).

Acceptance Criteria

• Find the root cause on why the pages are being stretched beyond the space that is left after the sidebar is opened (that means clicking the arrow to open the sidebar, not hovering to open the sidebar)
• Do not scope your acceptance to just the Gantt and Calendar. This goes for ALL pages on the sidebar. (This should be pretty straightforward. If it works for one, it most likely will work for all the others. Do not forget to check though).
• Ensure it does not occur at all through a final test of all pages

Proposed Solution

• Find the parent prop for all other descendant pages. This is most likely a top level component that from the looks of it renders CSS to make it so it fits to whatever room is left AFTER the sidebar is opened. (AppAuthenticated.tsx)
• Try different CSS to see if it improves. Work towards modernizing it if it uses legacy/improper use of CSS.

Mocks

No response

Start with AppAuthenticated.tsx and reproduce the horizontal stretch with the sidebar opened, especially when switching to the Gantt Chart and Calendar pages. Inspect the parent layout props and CSS that size descendant pages, then verify every sidebar page fits the remaining window width without a horizontal scroll frame.