Improve modal UI & interactivity

output/main.js

@@ -126,7 +126,7 @@ function addQRModalHandlers() {
 			'click',
 			() => displayQRModal(communityID)
 		);
-		row.querySelector('.td_name a').addEventListener(
+		row.querySelector('.td_name').addEventListener(
 			'click',
 			(e) => {
 				e.preventDefault();

output/styles2.css

@@ -288,30 +288,6 @@ a[href^="https:"] .protocol-indicator::after {
 	margin-right: 1em;
 }
 
-
-@media (max-width: 1050px) {
-	/* Only current width breakpoint; */
-	/* Would follow w4 and precede w6. */
-	.show-from-w5 {
-		display: none;
-	}
-
-	#th_preview, .td_preview {
-		display: none;
-	}
-
-	:root {
-		--dynamic-columns-width: var(--collapsed-dynamic-columns-width);
-	}
-}
-
-@media (max-width: 500px) {
-	:root {
-		/* ! For when descriptions don't wrap and 100vw doesn't work. */
-		--dynamic-columns-width: 15rem;
-	}
-}
-
 .join_url_container {
 	display: flex;
 	flex-direction: row;
@@ -361,7 +337,7 @@ label[for=toggle-show-room-ids]::after {
 /* --- QR code modals --- */
 #details-modal {
 	padding: 0;
-	max-width: 80vw;
+	width: 80vw;
 	max-height: 80vh;
 }
 
@@ -369,15 +345,18 @@ label[for=toggle-show-room-ids]::after {
 	display: flex;
 	position: relative;
 	flex-direction: row;
-	padding: 2em;
+	padding: 3em;
 }
 
 #details-modal-close {
 	position: absolute;
 	cursor: pointer;
-	top: 0.35em;
+	top: 0rem;
-	right: 0.5em;
+	right: 0rem;
-	font-size: 2em;
+	font-size: 3.5rem;
+	width: 5rem;
+	height: 5.5rem;
+	text-align: center;
 }
 
 #details-modal-start {
@@ -393,9 +372,20 @@ label[for=toggle-show-room-ids]::after {
 	justify-content: center;
 }
 
+#details-modal-start #details-modal-description {
+	max-height: 50vh;
+	overflow: auto;
+}
+
+#details-modal-start #details-modal-description-inner:empty::after {
+	content: "No description";
+	font-style: italic;
+}
+
 #details-modal-end #details-modal-qr-code {
 	width: 20em;
 	height: 20em;
+	margin-bottom: 1em;
 }
 
 #details-modal-end #details-modal-qr-code-label {
@@ -454,6 +444,34 @@ label[for=toggle-show-room-ids]::after {
 	animation: fadein 0.5s, fadeout 0.5s 2.5s;
 }
 
+
+@media (max-width: 1050px) {
+	/* Only current width breakpoint; */
+	/* Would follow w4 and precede w6. */
+	.show-from-w5 {
+		display: none;
+	}
+
+	#th_preview, .td_preview {
+		display: none;
+	}
+
+	:root {
+		--dynamic-columns-width: var(--collapsed-dynamic-columns-width);
+	}
+}
+
+@media (max-width: 500px) {
+	:root {
+		/* ! For when descriptions don't wrap and 100vw doesn't work. */
+		--dynamic-columns-width: 15rem;
+	}
+
+	#details-modal-contents {
+		flex-direction: column;
+	}
+}
+
 /* Animations to fade the snackbar in and out */
 @-webkit-keyframes fadein {
 	from {bottom: 0; opacity: 0;}

sites/+components/qr_modals.php

@@ -15,7 +15,9 @@
 					title="Open preview in new tab"
 				></a>
 			</h1>
-			<p id="details-modal-description" data-hydrate-with="description">
+			<p id="details-modal-description">
+				<span>Description:</span>
+				<span id="details-modal-description-inner" data-hydrate-with="description"></span>
 			</p>
 			<gap></gap>
 			<div id="details-modal-room-info">
@@ -53,7 +55,8 @@
 				</p>
 			</div>
 		</div>
-		<div id="details-modal-end">
+		<gap></gap>
+		<div id="details-modal-end" class="show-from-w3">
 			<img
 				src=""
 				id="details-modal-qr-code"
@@ -61,6 +64,7 @@
 			>
 			<div id="details-modal-qr-code-label">
 				Scan QR code in Session to join
+				<br>
 				'<span data-hydrate-with="name"></span>'
 			</div>
 		</div>