From caae8e7385c264cc086edd1676ee2db9e10ca0bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felix=20Zed=C3=A9n=20Yver=C3=A5s?= <felix@fzy.se>
Date: Wed, 26 Jun 2024 19:55:22 +0200
Subject: [PATCH] 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 |  2 +-
 src/index.css                | 16 ++++++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/Workspace.jsx b/src/components/Workspace.jsx
index 3a52837..f617942 100644
--- a/src/components/Workspace.jsx
+++ b/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}
diff --git a/src/index.css b/src/index.css
index 61eb566..dba02a3 100644
--- a/src/index.css
+++ b/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;