fix: improve support for browsers with collapsing url bars

Some mobile browsers (e.g. chrome) uses collapsing url bars (the
bar collapses when you scroll). In such cases, `100vh` typically
refers to the full height of the viewport when the url bar is
collapsed (see also `svh`, `lvh` and `dvh`, e.g. at
<https://ishadeed.com/article/new-viewport-units/#the-small-large-and-dynamic-viewport-units>
). This meant that on my tablet, the editor would extend below the
visible page until I scrolled it into view.

This commit re-uses a fix from some of my other projects
(specifically
<https://github.com/dansdata-se/api/blob/5c7e788d40006097a258be5dbfe456cb260fa25f/src/styles/globals.css#L14-L28>
) where the root element is set to fill 100% height. This avoids
dealing with viewport units altogether. On my tablet, this means
that the url bar is visible and that the editor does not extend
below the visible page.

src/components/Workspace.jsx

@@ -338,7 +338,7 @@ export default function WorkSpace() {
   }, [load]);
 
   return (
-    <div className="h-[100vh] flex flex-col overflow-hidden theme">
+    <div className="h-full flex flex-col overflow-hidden theme">
       <ControlPanel
         diagramId={id}
         setDiagramId={setId}

src/index.css

@@ -2,6 +2,22 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  /*
+   * Workaround to allow proper bottom positioning for fixed
+   * elements in mobile browsers with collapsing url bars:
+   * https://stackoverflow.com/a/17555766/1137077
+   */
+  :root,
+  html,
+  body {
+    @apply h-full min-h-full;
+  }
+  #root {
+    @apply h-full min-h-full;
+  }
+}
+
 .semi-form-vertical .semi-form-field {
   margin: 0;
   padding-top: 8px !important;