[BUG] Live monitoring view alters nav menu alignment

[ramyaragupathy]

Describe the bug
While accessing the data live monitoring page, icons on nav menu are misaligned. Misalignment continues even after you move away from the page and continue to map tasks. However after a hard refresh the alignment is fixed.

To Reproduce
Steps to reproduce the behavior:

1. Go to any project's live monitoring view
2. Check the nav menu on top. You will see the support icon moved to bottom and the dropdown next to user's name missing
3. Next come back to the project and try locking a task with iD editor
4. You will notice the icons displaced in the nav menu and also in the iD editor's sidebar

Expected behavior
Accessing the data live monitoring page should not affect other sections of the frontend

Screenshots

Desktop (please complete the following information):

• MacOS
• Chrome, Firefox

[ramyaragupathy]

cc @emi420 @royallsilwallz @manjitapandey

[emi420]

I suspect this is related to the Tailwind CSS loading that we use with the Underpass UI component. It should be isolated and not affecting the rest of the pages. I'll take a look.

[ramyaragupathy]

A few more screenshots of icon misalignment:

[emi420]

I made changes to the Underpass UI components to isolate all styles with a className prefix.

https://github.com/hotosm/underpass-ui/

A new version of the NPM package will be published soon.

This should fix the issue. Maybe some changes will be needed on the TM side, as there are styles that need to be removed here:

https://github.com/hotosm/tasking-manager/blob/develop/frontend/src/views/projectLiveMonitoring.css

Also, the new Underpass UI version will work with a new version of the Underpass REST API that is ready to be deployed

cc @ramyaragupathy @royallsilwallz @manjitapandey

[emi420]

Update: Underpass UI new version (0.1.2) is published, I tested it today in the Tasking Manager and is working fine, but some changes are needed for the Live Monitoring view, I'm working on it.

I'll create a PR next week that will include:

• Fix for this styling issue
• Performance improvements
• Fixes for React state management issues
• New feature for render the project AOI on the map

CC @ramyaragupathy