merge commit

public/scripts/ui.js

@@ -839,8 +839,8 @@ class PairDeviceDialog extends Dialog {
         // Display the QR code for the url
         const qr = new QRCode({
             content: this._getShareRoomURL(),
-            width: 80,
-            height: 80,
+            width: 150,
+            height: 150,
             padding: 0,
             background: "transparent",
             color: getComputedStyle(document.body).getPropertyValue('--text-color'),

public/service-worker.js

@@ -1,4 +1,4 @@
-const cacheVersion = 'v1.1.0';
+const cacheVersion = 'v1.1.3';
 const cacheTitle = `pairdrop-cache-${cacheVersion}`;
 const urlsToCache = [
     'index.html',

public/styles.css

@@ -11,7 +11,8 @@
 /* Layout */
 
 html {
-    height: 100%;
+    min-height: 100%;
+    height: -webkit-fill-available;
 }
 
 html,
@@ -25,6 +26,8 @@ body {
 }
 
 body {
+    min-height: 100%;
+    min-height: -webkit-fill-available;
     flex-grow: 1;
     align-items: center;
     justify-content: center;
@@ -407,6 +410,7 @@ x-dialog x-background {
     transition: opacity 300ms;
     will-change: opacity;
     padding: 35px;
+    overflow: overlay;
 }
 
 x-dialog x-paper {
@@ -421,6 +425,13 @@ x-dialog x-paper {
     will-change: transform;
 }
 
+#pairDeviceDialog x-paper {
+    position: absolute;
+    top: max(50%, 350px);
+    height: 650px;
+    margin-top: -325px;
+}
+
 x-dialog:not([show]) {
     pointer-events: none;
 }
@@ -491,8 +502,8 @@ x-dialog .font-subheading {
 #roomKeyQrCode {
     padding: inherit;
     margin: auto;
-    width: 80px;
-    height: 80px;
+    width: 150px;
+    height: 150px;
 }
 
 #pairDeviceDialog hr {
@@ -619,6 +630,7 @@ x-dialog .row-reverse {
 #base64PasteDialog button[close] {
     margin-top: 20px;
 }
+
 #base64PasteDialog button[close]:before {
     border-radius: 8px;
 }
@@ -931,7 +943,7 @@ screen and (min-width: 1100px) {
         position: fixed;
     }
 
-    x-instructions:before {
+    x-instructions:not([drop-peer]):not([drop-bg]):before {
         content: attr(mobile);
     }
 }