increase QR-Code size as requested in #43 and fix overflow issues on iOS

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 {
@@ -419,6 +423,10 @@ x-dialog x-paper {
     box-sizing: border-box;
     transition: transform 300ms;
     will-change: transform;
+    position: absolute;
+    top: max(50%, 350px);
+    height: 650px;
+    margin-top: -325px;
 }
 
 x-dialog:not([show]) {
@@ -491,8 +499,8 @@ x-dialog .font-subheading {
 #roomKeyQrCode {
     padding: inherit;
     margin: auto;
-    width: 80px;
-    height: 80px;
+    width: 150px;
+    height: 150px;
 }
 
 #pairDeviceDialog hr {
@@ -619,6 +627,7 @@ x-dialog .row-reverse {
 #base64PasteDialog button[close] {
     margin-top: 20px;
 }
+
 #base64PasteDialog button[close]:before {
     border-radius: 8px;
 }
@@ -931,7 +940,7 @@ screen and (min-width: 1100px) {
         position: fixed;
     }
 
-    x-instructions:before {
+    x-instructions:not([drop-peer]):not([drop-bg]):before {
         content: attr(mobile);
     }
 }