Fixed Panels animations not working on docs site

[r100-stack]

Changes

I believe the animations were not working on the docs site because the examples were placed in a shadow DOM. Thus, calling getElementById("…").scrollIntoView() wouldn't work since getElementById() would not return the Panel that is in the shadow DOM. Exact code:

iTwinUI/packages/itwinui-react/src/core/Panels/Panels.tsx

Line 87 in 78ae415

ref.current?.ownerDocument.getElementById(newActiveId)?.scrollIntoView({

To fix it, this PR no longer uses the ownerDocument. Since the panels are always within the PanelsWrapper, we can instead use search for the Panel within the ref of the the PanelsWrapper:

- ref.current?.ownerDocument.getElementById(newActiveId)?.scrollIntoView()
+ ref.current?.querySelector(`[id='${newActiveId}']`)?.scrollIntoView()

For the selector, I didn't use `#${newActiveId}` since React's useId() gives ids starting with ":" that gives an error if used in querySelector().

Testing

Confirmed that the animations now work on the docs site.

Docs

Added a changeset. But since this issue might be rare, I could remove the changeset if any reviewer feels so.

[mayank99]

LGTM! Nice work on diagnosing this as a shadow DOM issue