[PATCH gamja 1/1] style: optimize for iOS PWA mode
Export this patch
From: Gianguido Sora <me+sourcehut@gsora.xyz>
Tweak CSS in order to not have iOS notch and navigation bar over UI components.
Does nothing if the browser doesn't define `safe-area-inset-*' CSS variables.
---
index.html | 2 +-
style.css | 5 +++++
2 files changed, 6 insertions(+), 1 deletion(-)
diff --git a/index.html b/index.html
index ec656db..971607c 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
<title>gamja IRC client</title>
<link rel="stylesheet" href="./style.css">
<script type="module" src="./main.js"></script>
- <meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, viewport-fit=cover">
<link rel="manifest" href="manifest.json">
</head>
<body>
diff --git a/style.css b/style.css
index dd41582..846a7d5 100644
--- a/style.css
+++ b/style.css
@@ -711,6 +711,11 @@ ul.switcher-list .server {
}
@media (max-width: 640px) {
+ html {
+ max-height: calc(100% - env(safe-area-inset-top));
+ padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
+ }
+
.expander {
display: block;
}
--
2.43.4
gamja/patches/.build.yml: SUCCESS in 23s
[Optimize style for iOS PWA mode][0] from [~gsora][1]
[0]: https://lists.sr.ht/~emersion/public-inbox/patches/53557
[1]: mailto:me+sourcehut@gsora.xyz
✓ #1262929 SUCCESS gamja/patches/.build.yml https://builds.sr.ht/~emersion/job/1262929