wiz

static/css/connect.css

@@ -13,9 +13,8 @@
     display: block;
     position: relative;
     width: 253px;
-    height: 241px;
-    -webkit-backdrop-filter: blur(10px);
-    backdrop-filter: blur(10px);
+    min-height: 241px;
+    height: auto;
     margin-top: 10px;
     padding: 10px;
     transition: background-color 0.5s;
@@ -27,7 +26,7 @@
 }
 
 /* prevent overlap: hide connect string until revealed; click surface on box */
-.qrcode-box #connectString { display: none; }
+.qrcode-box #connectString { display: none; margin-top: 6px; }
 .qrcode-box.revealed #connectString { display: block; }
 .qrcode-box { cursor: pointer; }
 
@@ -40,6 +39,7 @@
     align-items: center;
     justify-content: center;
     overflow: hidden;
+    margin-top: 6px;
 }
 .qrcode-viewport #qrcode {
     position: absolute;
@@ -60,6 +60,9 @@
 }
 .qrcode-box.revealed .qr-veil { display: none; }
 
+/* hide helper text when revealed to avoid overlap */
+.qrcode-box.revealed #click-text { display: none; }
+
 .qrcode-box-clicked::before {
     content: "";
     position: absolute;

static/js/wizard.js

@@ -152,12 +152,13 @@ $(() => {
                     new QRCode(qrElement, { text: connectString, colorDark: '#000000', colorLight: '#ffffff', width: 157, height: 157 });
                 }
 
-                // Reveal on click: show string and remove veil
-                codebox.off('click').on('click', () => {
+                // Reveal on click: show string below and remove veil/heading
+                codebox.off('click').on('click', (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
                     if (!codebox.hasClass('revealed')) {
                         cs.text(connectString);
                         codebox.addClass('revealed');
-                        clickText.text('Pairing code');
                     }
                 });
             })();