Element overlapping occurs when UIO text size is increased

[BlueSlug]

Describe the bug

As reported by @cindyli: "Gradually increase UIO font size, you will notice a few issues:

On the desktop view:

1. At some point, the menu bar at the top right will overlap with the logo at the top left;
2. Go to a page having the side menu, such as the "Perspectives" page, the main content overflows and stretches out of the screen width. The content in the left panel even gets cut off and loses some content.

On the mobile view:

1. The menu icon doesn't overlap with the logo but the full width of these two elements exceeds the screen size causing the overflow.
2. The page title, "Perspectives" in this case, does wrap into multiple lines. But these lines start to overlap on each other.

Instead of using UIO, if you use "Command" and "+" to increase font size, the browser will handle the font change quite nicely: the browser translates the font change to the viewport size change so that when the font size is large enough, the viewport will be switched from the desktop view to the mobile view. UIO doesn't have this ability yet.

WeCount site ran into the same issue. The decision was to remove the text size change from UIO."

To reproduce

Steps to reproduce the behavior:

1. Go to the Perspectives page: https://handbook.floeproject.org/perspectives/
2. Click on "show preferences" to open the UIO panel
3. Increase the text size preference to 2
4. Reduce the viewport/window width
5. See error

Expected behavior

Text should not be overlapping itself nor other elements on the page such as the header banner.

Screenshots

Technical details

Desktop

• OS: Windows 10 Pro 21H2
• Browser & version: Chrome 99

Mobile device

• Device: Google Pixel 5
• OS: Android 12
• Browser & version: Chrome 99

Assistive technology used

N/A

Additional context or notes

As reported in #48 review