Fixing small display of qr code when sharing a long url on a high-den…

…sity display
tstibbs · Dec 19, 2024 · 30c0cbc · 30c0cbc
1 parent cf8c0de
commit 30c0cbc
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/ui-additions/src/additions.css b/ui-additions/src/additions.css
@@ -33,6 +33,14 @@
 	flex-direction: column;
 	flex-wrap: wrap;
 	padding: 10px;
+	max-width: 100%;
+	overflow: auto;
+}
+
+#sync-share-canvas {
+	width: 90%;
+	max-width: 90vh;
+	max-height: 90vh;
 }
 
 .sync-base-panel label {
@@ -42,7 +50,13 @@
 #sync-share-link {
 	font-family: sans-serif;
 	text-align: center;
-	padding: 15px;
+	padding-top: 15px;
+	padding-bottom: 15px;
+	max-width: 100%;
+}
+
+#sync-share-link > a {
+	word-wrap: break-word;
 }
 
 div#toolbarViewerMiddle,

diff --git a/ui-additions/src/sharer.js b/ui-additions/src/sharer.js
@@ -8,6 +8,7 @@ export class Sharer {
 	async showShareInfo(canvas) {
 		const shareUrl = this._urlUtils.generateClientUrl()
 		await qrcode.toCanvas(canvas, shareUrl)
+		canvas.removeAttribute('style') //gets set by the qrcode lib but we want to override using a stylesheet
 		return shareUrl
 	}
 }