Add width/height properties to web viewer (#6636)

### What

We now set the web viewer CSS width/height to some default values, which
can be modified by the user. Setting them to empty strings is allowed to
disable the default values completely, and allow styling the canvas
through other means as before.

This is meant as a mitigation for
emilk/egui#4699 - by setting the CSS
width/height to _something_, the canvas width/height attributes won't
contribute to the display size of the canvas.

Tested in https://github.com/rerun-io/web-viewer-example by manually
linking the package

### Checklist
* [x] I have read and agree to [Contributor
Guide](https://github.com/rerun-io/rerun/blob/main/CONTRIBUTING.md) and
the [Code of
Conduct](https://github.com/rerun-io/rerun/blob/main/CODE_OF_CONDUCT.md)
* [x] I've included a screenshot or gif (if applicable)
* [x] I have tested the web demo (if applicable):
* Using examples from latest `main` build:
[rerun.io/viewer](https://rerun.io/viewer/pr/6636?manifest_url=https://app.rerun.io/version/main/examples_manifest.json)
* Using full set of examples from `nightly` build:
[rerun.io/viewer](https://rerun.io/viewer/pr/6636?manifest_url=https://app.rerun.io/version/nightly/examples_manifest.json)
* [x] The PR title and labels are set such as to maximize their
usefulness for the next release's CHANGELOG
* [x] If applicable, add a new check to the [release
checklist](https://github.com/rerun-io/rerun/blob/main/tests/python/release_checklist)!

- [PR Build Summary](https://build.rerun.io/pr/6636)
- [Recent benchmark results](https://build.rerun.io/graphs/crates.html)
- [Wasm size tracking](https://build.rerun.io/graphs/sizes.html)

To run all checks from `main`, comment on the PR with `@rerun-bot
full-check`.

rerun_js/web-viewer-react/README.md

@@ -30,7 +30,7 @@ This means that `@rerun-io/[email protected]` can only connect to a data s
 import WebViewer from "@rerun-io/web-viewer-react";
 
 export default function App() {
-  return <WebViewer rrd="...">
+  return <WebViewer width="800px" height="600px" rrd="...">
 }
 ```
 
@@ -39,6 +39,10 @@ The `rrd` in the snippet above should be a URL pointing to either:
 - A WebSocket connection to the SDK opened via the [`serve`](https://www.rerun.io/docs/reference/sdk-operating-modes#serve) API
 
 If `rrd` is not set, the Viewer will display the same welcome screen as <https://app.rerun.io>.
+This can be disabled by setting the `hide_welcome_screen` prop to `true`.
+
+⚠ It's important to set the viewer's width and height, as without it the viewer may not display correctly.
+Setting the values to empty strings is valid, as long as you style the canvas through other means.
 
 ℹ️ Note:
 This package only targets recent versions of browsers.

rerun_js/web-viewer-react/index.js

@@ -44,6 +44,8 @@ export default class WebViewer extends React.Component {
     const current = /** @type {HTMLDivElement} */ (this.#parent.current);
     this.#handle.start(this.#recordings, current, {
       hide_welcome_screen: this.#hide_welcome_screen,
+      width: "100%",
+      height: "100%",
     });
   }
 
@@ -61,7 +63,7 @@ export default class WebViewer extends React.Component {
   }
 
   render() {
-    const { width = "100%", height = "640px" } = this.props;
+    const { width = "640px", height = "360px" } = this.props;
     return React.createElement("div", {
       className: "rerun-web-viewer",
       style: { width, height, position: "relative" },

rerun_js/web-viewer/README.md

@@ -35,7 +35,7 @@ const rrd = "…";
 const parentElement = document.body;
 
 const viewer = new WebViewer();
-await viewer.start(rrd, parentElement);
+await viewer.start(rrd, parentElement, { width: "800px", height: "600px" });
 // …
 viewer.stop();
 ```
@@ -45,6 +45,10 @@ The `rrd` in the snippet above should be a URL pointing to either:
 - A WebSocket connection to the SDK opened via the [`serve`](https://www.rerun.io/docs/reference/sdk-operating-modes#serve) API
 
 If `rrd` is not set, the Viewer will display the same welcome screen as <https://app.rerun.io>.
+This can be disabled by setting `hide_welcome_screen` to `true` in the options object of `viewer.start`.
+
+⚠ It's important to set the viewer's width and height, as without it the viewer may not display correctly.
+Setting the values to empty strings is valid, as long as you style the canvas through other means.
 
 For a full example, see https://github.com/rerun-io/web-viewer-example.
 You can open the example via CodeSandbox: https://codesandbox.io/s/github/rerun-io/web-viewer-example

rerun_js/web-viewer/index.ts

@@ -44,6 +44,9 @@ interface WebViewerOptions {
   render_backend?: Backend;
   hide_welcome_screen?: boolean;
   allow_fullscreen?: boolean;
+
+  width?: string;
+  height?: string;
 }
 
 interface FullscreenOptions {
@@ -107,6 +110,8 @@ export class WebViewer {
     this.#state = "starting";
 
     this.#canvas = document.createElement("canvas");
+    this.#canvas.style.width = options.width ?? "640px";
+    this.#canvas.style.height = options.height ?? "360px";
     this.#canvas.id = this.#id;
     parent.append(this.#canvas);