I need to Resize My custom extension to available blank space on the work items page.

Environment: Azure DevOps Server 2022.
Library: React.js
package used: "azure-devops-extension-sdk": "^4.0.2",

Requirement:

I'm creating a new extension (it renders workitem description on a new editor) with the following contribution details as per the image:

And the output looks like this: (On Advanced Editing tab, this i added)

Here, the green marked area at the bottom is the empty space which I need to fill.

I know if I keep the height as 600, it may fill, but I need dynamic height calculation to fill the value. As the extension loads inside the iframe, I am not able to access the parent window height.

I tried calling resize(x, y) in my code, but it's not giving a better result.

So in short, even though i set the height as 500 (in vss-extension.json), based on the screen size i may need to resize it to 300px or 600px.
How can i achieve this ?
Any help would be highly appreciated.

Start with the extension contribution details in vss-extension.json and the existing resize(x, y) usage in the React extension. Check the Azure DevOps Extension SDK behavior for iframe sizing in the Azure DevOps Server 2022 work item editor, and verify that the extension fills the available blank area at different screen sizes.