1 files changed, 37 insertions, 12 deletions
diff --git a/priv/discord_activity.html.eex b/priv/discord_activity.html.eex
index 5278400..9dd0649 100644
--- a/priv/discord_activity.html.eex
+++ b/priv/discord_activity.html.eex
@@ -1,6 +1,7 @@
-<% home_url = "/.proxy/?#{Mediasync.Constants.query_param_discord_activity_inner()}" %>
+<% home_url="/.proxy/?#{Mediasync.Constants.query_param_discord_activity_inner()}" %>
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -8,23 +9,43 @@
     <title>discord activity | mediasync</title>
     <style>
         :root {
-            --instance-room-info-height: 20svh;
-            --instance-room-info-remainder: calc(100svh - var(--instance-room-info-height));
+            /* Based on https://discord.com/developers/docs/activities/development-guides#mobile-safe-areas */
+            --sait: var(--discord-safe-area-inset-top, env(safe-area-inset-top, 0px));
+            --sair: var(--discord-safe-area-inset-right, env(safe-area-inset-right, 0px));
+            --saib: var(--discord-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
+            --sail: var(--discord-safe-area-inset-left, env(safe-area-inset-left, 0px));
+
+            --saiv: calc(var(--sait) + var(--saib));
+            --saih: calc(var(--sair) + var(--sail));
+
+            --instance-room-info-height: 20%;
+            --instance-room-info-remainder: calc(100% - var(--instance-room-info-height));
+
+            box-sizing: border-box;
+            height: calc(100% - var(--saiv));
+            width: calc(100% - var(--saih));
+        }
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: inherit;
         }
 
         body {
-            overflow: hidden;
             background-color: black;
             color: white;
             font-family: monospace;
+            height: 100%;
+            margin: var(--sait) var(--sair) var(--saib) var(--sail);
+            overflow: hidden;
+            width: 100%;
         }
+
         iframe {
             border: none;
-        }
-        html, body, iframe {
-            margin: 0;
-            width: 100svw;
-            height: 100svh;
+            height: 100%;
+            width: 100%;
         }
 
         iframe.at-home {
@@ -32,17 +53,20 @@
         }
 
         div#instance-room-info {
+            border-bottom: 1px solid white;
             display: none;
+            height: var(--instance-room-info-height);
             overflow: auto;
+            padding: 8px 8px 0px 8px;
+            width: 100%;
         }
 
         body:has(> iframe.at-home) > div#instance-room-info {
             display: block;
-            height: var(--instance-room-info-height);
-            border-bottom: 1px solid white;
         }
     </style>
 </head>
+
 <body data-csrf-token="<%= Plug.CSRFProtection.get_csrf_token() %>">
     <div id="instance-room-info">
         <span style="font-weight: bold;">currently hosting:</span>
@@ -55,10 +79,11 @@
         const ACCESS_TOKEN_URL = "/.proxy/discord_activity/access_token?<%= Mediasync.Constants.query_param_discord_activity_inner() %>";
         const HOME_URL = "<%= home_url %>";
         const roomUrl = (roomId) => {
-          return `/.proxy/room/${roomId}?<%= Mediasync.Constants.query_param_discord_activity_inner() %>`;
+            return `/.proxy/room/${roomId}?<%= Mediasync.Constants.query_param_discord_activity_inner() %>`;
         };
     </script>
     <script src="/static/discord-embedded-app-sdk/Discord.js" type="module"></script>
     <script src="/static/discordActivity.js" type="module"></script>
 </body>
+
 </html>