change position of button to close paste mode

public/index.html

@@ -70,6 +70,7 @@
             </svg>
         </a>
     </header>
+    <a id="cancelPasteModeBtn" class="button" close hidden>Done</a>
     <!-- Peers -->
     <x-peers class="center"></x-peers>
     <x-no-peers>
@@ -79,7 +80,6 @@
     <x-instructions desktop="Click to send files or right click to send a message" mobile="Tap to send files or long tap to send a message">
         <p id="pasteFilename"></p>
     </x-instructions>
-    <a id="cancelPasteModeBtn" class="button" close hidden style="z-index: 2">Done</a>
     <!-- Footer -->
     <footer class="column">
         <svg class="icon logo">

public/scripts/ui.js

@@ -181,9 +181,8 @@ class PeersUI {
             const xNoPeers = document.querySelectorAll('x-no-peers')[0];
 
             xNoPeers.getElementsByTagName('h2')[0].innerHTML = 'Open PairDrop on other devices to send files';
-            const cancelPasteModeBtn = document.getElementById('cancelPasteModeBtn');
 
-            cancelPasteModeBtn.setAttribute('hidden', "");
+            this.$cancelPasteModeBtn.setAttribute('hidden', "");
 
             console.log('Paste mode deactivated.')
             Events.fire('paste-mode-changed');
@@ -745,6 +744,7 @@ class PairDeviceDialog extends Dialog {
             if (!nextSibling) break;
             nextSibling.focus();
         }
+        this.evaluateRoomKeyChars();
     }
 
     evaluateRoomKeyChars() {

public/styles.css

@@ -604,8 +604,16 @@ x-dialog .row-reverse {
     opacity: 0.1;
 }
 
-#cancelPasteModeBtn:before {
-    border-radius: 8px;
+#cancelPasteModeBtn {
+    z-index: 2;
+    margin-top: 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    width: 100%;
+    height: 56px;
+    border-bottom: solid 2.5px var(--border-color);
 }
 
 .button:focus:before,
@@ -783,7 +791,7 @@ x-toast:not([show]):not(:hover) {
 
 x-instructions {
     position: absolute;
-    top: 20vh;
+    top: 120px;
     opacity: 0.5;
     transition: opacity 300ms;
     z-index: -1;