Maps widget dropdown menu is not visible on embedded dashboard

[ElenaGallo]

Description

On QA only, the maps widget dropdown menu is not visible on embedded dashboard.

3.mov

How to reproduce

• Open this embedded dash
• Try to change map on maps widget

Expected Result
On DEV (it is the correct one)

Current Result

On prod: the dropdown menu is cut off

On QA: the dropdown menu is under the map

• Not browser related

Browser info

(use this site: https://www.whatsmybrowser.org/ for non expert users)

Browser Affected	Version
Internet Explorer
Edge
Chrome
Firefox
Safari

Other useful information

[dsuren1]

@tdipisa

On prod: the dropdown menu is cut off

The styling from cadastrapp extension is forcing the .Select-menu-outer to set width: 160.

Fix:

• We can modify on the cadastrapp extension's css as the usage of this style override is not advisable.

• Or we can do it on the MS, however we usually don't enforce !important unless overriding a style of a lib or some class that should always take precedence. Maybe adding only to map-switcher's child alone is okay

.mapstore-widget-header .map-switcher .Select-menu-outer {
  ....,
  width: 100% !important
}

On QA: the dropdown menu is under the map

The map widget is using leaflet as default maptype in dashboard embedded and a style leaflet-pane is setting z-index: 400 causing the overlap

Fix to 2023.01.01
Adding maptype reducer to appConfigDashboardEmbedded will set default maptype from localConfig.json

(as should be fixed in next stable when #8334 is promoted)

[tdipisa]

@dsuren1

We can modify on the cadastrapp extension's css or do it on the MS

I've removed the cadastrapp extension from the PROD instance but the issue is still there.

Adding maptype reducer to appConfigDashboardEmbedded will set default maptype from localConfig.json

Ok. Since you mentioned #8334, please consider also further changes included through #9012 that may be relevant.

[dsuren1]

@dsuren1

We can modify on the cadastrapp extension's css or do it on the MS

I've removed the cadastrapp extension from the PROD instance but the issue is still there.

It is now fixed in PROD. WRT to width of the select dropdown

Yes, it was probably a browser cache issue on my side.

However, the overlapping of map over dropdown in embedded view needs the fix reported in point 2 for both qa and prod.

Yes, it was clear as I've also commented above. Please concentrate your effort only on this ignoring point 1 for now.