FilePicker style issues with spfx 1.22.2

Category

[ ] Enhancement

[X ] Bug

[ ] Question

Version

Please specify what version of the library you are using: [ ^3.23.0 ]

If you are not using the latest release, please update and see if the issue is resolved before submitting an issue.

Expected / Desired Behavior / Question

styles of the picker dialog to remain like they were in previous spfx version.
I have an old project on the same tenant using spfx 1.21.1 and same version of the controls, and they look fine.

Observed Behavior

style is stuffed up - the dialog looks like no css was loaded, with all controls in a single line

Steps to Reproduce

1. install latest yo updates Generator@1.22.2
2. create a webpart project

3. install latest version of react controls npm install @pnp/spfx-controls-react --save --save-exact 4. change the webpart code to add a file picker (as per documentation)

test by running "heft start" and add the webpart to the page, click on the icon to open the dialog.

Some troubleshooting -

1. it looks like the previous version outputed h2.tabheader for the dialog title, while new version prints

File Picker

2. the new version adds css padding to the left of the panel content 3. the old version used to specify a width for the nav element (210px) - this is not in the new version 4. the old version used absolute positioning to place the selection (.tabscontainer) at the top of the dialog, but to the side of the navigation. this is not in the new version

Start with the FilePicker control and reproduce the issue in a newly generated SPFx 1.22.2 web part using heft start. Compare the dialog markup and layout behavior with the same control in SPFx 1.21.1, focusing on the panel header, content padding, navigation width, and tab positioning; done means the picker dialog layout is restored in the newer environment.