search

hotosm / tasking-manager

Tasking Manager - The tool to team up for mapping in OpenStreetMap
https://wiki.openstreetmap.org/wiki/Tasking_Manager
BSD 2-Clause "Simplified" License
496 stars 267 forks source link

[BUG] Live monitoring view alters nav menu alignment #6415

Open ramyaragupathy opened 2 months ago

ramyaragupathy commented 2 months ago

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

image image

Desktop (please complete the following information):

ramyaragupathy commented 2 months ago

cc @emi420 @royallsilwallz @manjitapandey

emi420 commented 2 months ago

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 commented 1 month ago

A few more screenshots of icon misalignment:

image
emi420 commented 1 month ago

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 commented 1 month ago

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:

CC @ramyaragupathy