Part of #728, follow up of
#1583. Non-functional
refactoring.

#1583 left a stray `<div>`
in the `index.html` file, which doesn’t serve any purpose anymore.

This PR removes the `<div>`, and lifts up the `<remote-screen>` and
`<on-screen-keyboard>` components. That doesn’t have any actual effect,
as all HTML elements are positioned absolutely anyway, but to me it
makes for a slightly more intuitive code structure: i.e., we instantiate
the basic elements in the order in which they appear on the screen, and
have all dialog elements underneath.
<a data-ca-tag
href="https://codeapprove.com/pr/tiny-pilot/tinypilot/1586"><img
src="https://codeapprove.com/external/github-tag-allbg.png" alt="Review
on CodeApprove" /></a>

Part of #728, stacked onto
#1586.

As demonstrated and discussed [in the original proof-of-concept
branch](#1574), we want to
hide the status bar and menu bar in the popup window [via a query
parameter](https://github.com/tiny-pilot/tinypilot/pull/1574/files#diff-66e482e36d313dd641cd92c815c5fa30fb380bbaa601810827b30a5b84428856R351).
So by appending `?viewMode=standalone` to the TinyPilot URL, this PR
hides the status bar, the menu bar, and the on-screen keyboard.

We will use this in a later PR, when adding the menu item for opening a
“real” popup window.

<img width="783" alt="Screenshot 2023-08-23 at 18 38 09"
src="https://github.com/tiny-pilot/tinypilot/assets/83721279/c3a22b9b-b3b8-49a3-a5b1-88d2368337ec">

The query parameter can also be used independent of the popup window,
which e.g. allows for [the iframe
use-case](#523).

## Notes

- `prettier-ignore` is needed above `<remote-screen>`, since Prettier
cannot handle Jinja2 templates, and would enforce a pretty [bulky
formatting
otherwise](https://github.com/tiny-pilot/tinypilot/pull/1574/files#diff-a18b3b5de30df1bcf7531723d24c214d69b2acff3cd88540e1ff186409879b0aR81-R88).
- I had to pull out a `--bar-padding` CSS variable in the
`<remote-screen>` component, so that we can dynamically override the
value. I forgot that in the [earlier
PR](#1583).
- In `index.html`, I injected the `display: none` via a plain `<style>`
block to hide the elements from the page. Since `index.html` itself
isn’t a web component, I’m not sure we can mimic our usual pattern with
HTML attributes here
([example](https://github.com/tiny-pilot/tinypilot/blob/aa80dbdd3e58e79401008665f2199d98fa14b3d0/app/templates/custom-elements/change-hostname-dialog.html#L12-L14)),
at least not without introducing more complexity and indirection. The
`<style>` block is not super beautiful, but I thought it’s simple and
straightforward at least.
- Note sure `standalone` is the greatest name for the query parameter
value. Potential alternatives: “screen-only”, “focus-mode”,
“dedicated-screen”. (It’s maybe not *that* critical, however… 🤔) In any
event, I found something like `?viewMode=standalone` more descriptive
and flexible than `standaloneMode=true`.
<a data-ca-tag
href="https://codeapprove.com/pr/tiny-pilot/tinypilot/1587"><img
src="https://codeapprove.com/external/github-tag-allbg.png" alt="Review
on CodeApprove" /></a>