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

feat(ghcr.io)  build container on tagged commits to ghcr.io

.github/workflows/github-image.yml

@@ -0,0 +1,51 @@
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+
+# GitHub recommends pinning actions to a commit SHA.
+# To get a newer version, you will need to update the SHA.
+# You can also reference a tag or branch, but the action may change without warning.
+
+name: GHCR Image CI
+
+on:
+  push:
+    tags:
+      - "v*.*.*"
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository | downcase }}
+
+jobs:
+  build-and-push-image:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Log in to the Container registry
+        uses: docker/login-action@f054a8b539a109f9f41c372932f1ae047eff08c9
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "pairdrop",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "pairdrop",
-      "version": "1.1.0",
+      "version": "1.1.1",
       "license": "ISC",
       "dependencies": {
         "express": "^4.18.2",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pairdrop",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "",
   "main": "index.js",
   "scripts": {

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.1';
 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 {
@@ -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);
     }
 }

public_included_ws_fallback/scripts/ui.js

@@ -840,8 +840,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_included_ws_fallback/service-worker.js

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

public_included_ws_fallback/styles.css

@@ -12,7 +12,8 @@
 /* Layout */
 
 html {
-    height: 100%;
+    min-height: 100%;
+    height: -webkit-fill-available;
 }
 
 html,
@@ -26,6 +27,8 @@ body {
 }
 
 body {
+    min-height: 100%;
+    min-height: -webkit-fill-available;
     flex-grow: 1;
     align-items: center;
     justify-content: center;
@@ -416,6 +419,7 @@ x-dialog x-background {
     transition: opacity 300ms;
     will-change: opacity;
     padding: 35px;
+    overflow: overlay;
 }
 
 x-dialog x-paper {
@@ -428,6 +432,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]) {
@@ -500,8 +508,8 @@ x-dialog .font-subheading {
 #roomKeyQrCode {
     padding: inherit;
     margin: auto;
-    width: 80px;
-    height: 80px;
+    width: 150px;
+    height: 150px;
 }
 
 #pairDeviceDialog hr {
@@ -628,6 +636,7 @@ x-dialog .row-reverse {
 #base64PasteDialog button[close] {
     margin-top: 20px;
 }
+
 #base64PasteDialog button[close]:before {
     border-radius: 8px;
 }
@@ -944,7 +953,7 @@ screen and (min-width: 1100px) {
         position: fixed;
     }
 
-    x-instructions:before {
+    x-instructions:not([drop-peer]):not([drop-bg]):before {
         content: attr(mobile);
     }
 }