From 6501008c8cfe40a5dfcd1c246f2d8d2708c511ea Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Tue, 9 Dec 2025 02:52:58 +0900
Subject: [PATCH] [F] Fix mobile view height causing button to be invisible
 when browser url bar is not hidden

---
 src/routes/+layout.svelte | 3 ++-
 src/style/app.sass        | 3 +++
 src/style/app.scss        | 3 +++
 3 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 src/style/app.scss

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 88219fb..b029cdc 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,6 +3,7 @@
   import "@fontsource/roboto"
   import 'virtual:uno.css'
   import "../style/app.sass"
+  import "../style/app.scss"
   import "../style/material.scss"
   import '@unocss/reset/normalize.css'
   import '@unocss/reset/tailwind-v4.css'
@@ -52,7 +53,7 @@
   <meta property="twitter:image" content="https://amaoke.app/images/meta.png" />
 </svelte:head>
 
-<div class="vbox h-screen min-h-screen box-border overflow-hidden relative max-w-1200px mx-auto">
+<div id="layout-view" class="vbox box-border overflow-hidden relative max-w-1200px mx-auto">
   {@render children()}
 </div>
 
diff --git a/src/style/app.sass b/src/style/app.sass
index 62f27fa..15c7e36 100644
--- a/src/style/app.sass
+++ b/src/style/app.sass
@@ -10,6 +10,9 @@ body
     margin: 0
     background: rgb(var(--m3-scheme-background))
 
+#layout-view
+    height: var(--svh)
+
 .hbox
     display: flex
     flex-direction: row
diff --git a/src/style/app.scss b/src/style/app.scss
new file mode 100644
index 0000000..43224e2
--- /dev/null
+++ b/src/style/app.scss
@@ -0,0 +1,3 @@
+:root { --svh: 100vh; --dvh: 100vh; --svw: 100vw; --dvw: 100vw; }
+@supports (height: 100svh) { :root { --svh: 100svh; --svw: 100svw; } }
+@supports (height: 100dvh) { :root { --dvh: 100dvh; --dvw: 100dvw; } }
\ No newline at end of file