From 629328c2f614b4077bdc58d5839ccdc6979618a9 Mon Sep 17 00:00:00 2001
From: schlagmichdoch <schlagmichdoch@users.noreply.github.com>
Date: Thu, 13 Feb 2025 20:07:25 +0100
Subject: [PATCH 1/3] Use css instead of JS to detect offset on high viewports

---
 public/scripts/ui-main.js     | 1 -
 public/styles/styles-main.css | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/public/scripts/ui-main.js b/public/scripts/ui-main.js
index bbdece4..3289ee7 100644
--- a/public/scripts/ui-main.js
+++ b/public/scripts/ui-main.js
@@ -357,7 +357,6 @@ class BackgroundCanvas {
         this.w = document.documentElement.clientWidth;
         this.h = document.documentElement.clientHeight;
         this.offset = this.$footer.offsetHeight - 27;
-        if (this.h >= 800) this.offset += 10;
 
         if (oldW === this.w && oldH === this.h && oldOffset === this.offset) return; // nothing has changed
 
diff --git a/public/styles/styles-main.css b/public/styles/styles-main.css
index 5cff395..c36634a 100644
--- a/public/styles/styles-main.css
+++ b/public/styles/styles-main.css
@@ -899,7 +899,7 @@ x-peers:empty~x-instructions {
 
 @media screen and (min-height: 800px) {
     footer {
-        margin-bottom: 16px;
+        padding-bottom: 10px;
     }
 }
 

From 8a833cd69dae86519d60b11ee5e094f232772c31 Mon Sep 17 00:00:00 2001
From: schlagmichdoch <schlagmichdoch@users.noreply.github.com>
Date: Thu, 13 Feb 2025 20:07:38 +0100
Subject: [PATCH 2/3] Make PWA standalone

---
 public/manifest.json          | 2 +-
 public/scripts/main.js        | 2 +-
 public/styles/styles-main.css | 7 +++++++
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/public/manifest.json b/public/manifest.json
index 5198d81..edcf69a 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -26,7 +26,7 @@
         }
     ],
     "background_color": "#efefef",
-    "display": "minimal-ui",
+    "display": "standalone",
     "theme_color": "#3367d6",
     "screenshots" : [
         {
diff --git a/public/scripts/main.js b/public/scripts/main.js
index 8960ed2..9929627 100644
--- a/public/scripts/main.js
+++ b/public/scripts/main.js
@@ -81,7 +81,7 @@ class PairDrop {
     }
 
     onPwaInstallable(e) {
-        if (!window.matchMedia('(display-mode: minimal-ui)').matches) {
+        if (!window.matchMedia('(display-mode: standalone)').matches) {
             // only display install btn when not installed
             this.$headerInstallBtn.removeAttribute('hidden');
             this.$headerInstallBtn.addEventListener('click', () => {
diff --git a/public/styles/styles-main.css b/public/styles/styles-main.css
index c36634a..bbf3ddf 100644
--- a/public/styles/styles-main.css
+++ b/public/styles/styles-main.css
@@ -909,6 +909,13 @@ x-peers:empty~x-instructions {
     }
 }
 
+/* PWA Standalone styles */
+@media all and (display-mode: standalone) {
+    footer {
+        padding-bottom: 34px;
+    }
+}
+
 /* Constants */
 
 :root {

From 27a61d589b46e6f3d560af367ef6eaf52e50073c Mon Sep 17 00:00:00 2001
From: Chris Lovett <57230137+realchrislovett@users.noreply.github.com>
Date: Fri, 14 Feb 2025 12:05:38 -0500
Subject: [PATCH 3/3] Remove bar at top of screen on iOS

On iOS, when the app runs as a PWA without this line, there will be a bar at the top of the screen. Implementing this setting will make for a more seamless UI on iOS, as documented below.

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
---
 public/index.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index 5dec40a..7638520 100644
--- a/public/index.html
+++ b/public/index.html
@@ -10,6 +10,7 @@
     <meta name="theme-color" content="#3367d6">
     <meta name="color-scheme" content="dark light">
     <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <meta name="apple-mobile-web-app-title" content="PairDrop">
     <meta name="application-name" content="PairDrop">
     <!-- Descriptions -->
@@ -841,4 +842,4 @@
         </x-noscript>
     </noscript>
 </body>
-</html>
\ No newline at end of file
+</html>