Improve modal pane experience

output/index.css

@@ -671,6 +671,8 @@ footer nav a {
 	#details-modal-pane-selection {
 		display: inline-flex;
 		flex-direction: row;
+		/* Stick to the right */
+		margin: 0 0 0 auto;
 	}
 
 	#details-modal-panes[data-pane="0"] > .details-modal-pane:not([data-pane="0"]),

output/main.js

@@ -91,7 +91,7 @@ const tagBody = ({text, type, description}) => element.span({
 	title: description
 });
 
-function displayQRModal(communityID) {
+function displayQRModal(communityID, pane = 0) {
 	const modal = dom.details_modal();
 
 	if (!modal) {
@@ -135,7 +135,7 @@ function displayQRModal(communityID) {
 
 	dom.details_modal_qr_code().src = communityQRCodeURL(communityID);
 
-	document.getElementById('details-modal-panes').setAttribute('data-pane', 0);
+	document.getElementById('details-modal-panes').setAttribute('data-pane', pane);
 
 	modal.showModal();
 }
@@ -152,7 +152,7 @@ function addQRModalHandlers() {
 		for (const cell of ['.td_qr_code', '.td_description', '.td_language', '.td_users']) {
 			row.querySelector(cell).addEventListener(
 				'click',
-				() => displayQRModal(communityID)
+				() => displayQRModal(communityID, cell == '.td_qr_code' ? 1 : 0)
 			);
 		}
 		row.addEventListener(

sites/+components/qr_modals.php

@@ -108,7 +108,7 @@
 						themed-button"
 						data-pane="0"
 						class="themed-button"
-					>Back</button>
+					>Show description</button>
 					<button
 						class="details-modal-pane-button
 						themed-button"