From f661f29b671db7d46e8dc5410c00f295efdbff7a Mon Sep 17 00:00:00 2001
From: Kenneth <kennethnym@outlook.com>
Date: Thu, 1 Aug 2024 15:58:38 +0100
Subject: [PATCH] fix: use svh unit for body height

On mobile, viewport height can be dynamic due to e.g. collapsible tab
bar. vh is based on the largest viewport height, so specifying 100vh
will cause part of the body to be covered by e.g. expanded tab bar.
using svh fixes this issue, as it is based on the smallest possible
viewport height instead e.g. the viewport height when the tab bar is
expanded.
---
 web/style.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/style.css b/web/style.css
index 812f484..3f72c48 100644
--- a/web/style.css
+++ b/web/style.css
@@ -31,6 +31,7 @@ body {
 
 body {
   width: calc(100% - 4rem - 2px);
+  height: calc(100svh - 6rem - 2px);
   height: calc(100vh - 6rem - 2px);
   padding: 2rem;
   margin: 0;