Item properties panel height is too small in new modern UI

[JurajSlavik]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• Edge 128.0.2739.79 (Official build) (64-bit), Chrome 129.0.6668.59 (Official Build) (64-bit)
• SPFx 1.16.1
• Node.js 14.20.1

Describe the bug / error

On sites with deployed SPFx app (containing ListView Command Set extension), the out of the box properties panel used for properties editation became practically unusable, because it`s height is too small for normal usage. Screenshot:

We have noticed this behavior today for the first time. On the sites / lists where no SPFx extensions are used, the panel behaves correctly for the lists with new modern UI.

Steps to reproduce

1. Go to the list, on which some SPFx ListView Command Set is executed
2. Click on New button (or Title of some existing item)
3. The properties panel for the new (or existing) item is opened on the right side.
4. The height of the panel has only about 90px, what makes it unusable.

Expected behavior

The properties panel for the new (or existing) item that is opened on the right side should have normal height (as it used to have), to allow normal work with the metadata.

[JurajSlavik]

For now, as a quick workaround (to allow our clients to see an edit list items metadata), we have injected css uing app extension with following css:

.od-panel-md-listform {
  height: 100%;
}

[JurajSlavik]

The same behaviour was observed on the client tenant after the See All click, in the right side list filter. The specific filter field panel, that is open, is too small:

For now, actual workaround is an injection of the following css:

/* Prevent SharePoint Online issue with too small OOTB panels */
.od-panel-md-listform,
.od-Panel--autoScroll {
  height: 100%;
}

[Ashlesha-MSFT]

Hello @JurajSlavik,
Thank you for bringing this issue to our attention. We will look into it and get back to you shortly.

[Ashlesha-MSFT]

@JurajSlavik,
I followed the steps given by you, but for my tenant, I am getting expected behavior

[JurajSlavik]

From your screenshot, I can see that you are using the latest new version of the Modern UI (centered dialogs, Filter, Group by and Sort buttons before views in the top menu).

On my screenshots, there is an old version of the Modern UI (i in circle icon for opening the details table, no buttons before Views, detail page is opened on the right side). I just re-checked it, and the issue still remains, it behaves as we observed one half year ago.

Additional info: We are forcing the usage of the old Modern UI using the Field Customizer (based on this information #9944 (comment)) as a prevention of other SPFx issues related to Modern UI (like non execution of some default methods in Command set customizers, like described for example here #9898).

[Ashlesha-MSFT]

@JurajSlavik,
Apologies for delayed responce
I tested by switching to classic experience, still not able to repro the issue

Can you please help me by sharing tenant details so that we can raise bug, so that engineering can investigate into the issue.

[JurajSlavik]

Don`t worry with the delay.

The problem is observed in the Modern Sharepoint UI, not in the Clasic experience.
But as I mentioned, it is not the latest new version ot the Modern UI (Microsoft Lists UI), but just Modern SharePoint UI.

Summary

• Classic Experience: no problem observed
• Modern SharePoint UI (new version, Microsoft Lists UI, centered dialogs): no problem observed
• Modern SharePoint UI (right side details pane): problem described it this issue is observed