The issue isnt really with the modal itself, but with how the sidebar's collapsed state is shared.

If you cant import the internal sidebar component, the best approach is to lift that collapse-expand state up, for example, by storing it in a React Context or a global store like Zustand. Then both the sidebar and the preview dialog can read the same state and re-render automatically when it changes.

That way, your preview dialog can simply use width: calc(100% - sidebarWidth) or flexbox to fill whatever space is available, without manually setting pixel values.

OR

A temporary CSS fix is to make the layout a flex container and position the dialog relative to the main content area instead of using position: fixed. That way, it naturally resizes as the sidebar width changes.

If this doesnt fix your problem, you can share it on codepen if possible, so I can have a closer look.

Cheers!