center

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+    "files.exclude": {
+        "**/*.rpyc": true,
+        "**/*.rpa": true,
+        "**/*.rpymc": true,
+        "**/cache/": true
+    }
+}

static/css/components.css

@@ -193,9 +193,9 @@ summary::-webkit-details-marker {
 /* Misc */
 .qrcode {
   margin-top: 10px;
-  margin-inline: auto;
   background-color: white;
   padding: 10px;
   border-radius: 4px;
   width: fit-content;
+  align-self: center;
 }

static/css/pages/queue.css

@@ -6,7 +6,7 @@
 }
 
 details:has(.route-list) {
-  width: 800px;
+  max-width: 800px;
 }
 
 .route-item {
@@ -34,8 +34,8 @@ details:has(.route-list) {
   flex-wrap: wrap;
   gap: 20px;
   justify-content: center;
-  align-items: flex-start;
-  width: 800px;
+  /* align-items: flex-start; */
+  max-width: 800px;
   padding-inline: 0;
 }
 
@@ -45,6 +45,7 @@ details:has(.route-list) {
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: space-between;
   text-align: center;
   /* Visual styles moved from components.css */
   background-color: var(--surface-color);
@@ -55,8 +56,9 @@ details:has(.route-list) {
 }
 
 .queue-grid li a {
-  align-items: center;
   word-break: break-word;
+  align-content: center;
+  /* flex: 1; */
 }
 
 /* Specific override for the queue input form */

templates/macros.html

@@ -29,10 +29,11 @@ queue_items %}
     {% for item in queue_items %}
     <li>
         <a href="{{ item }}" target="_blank" rel="noreferrer noopener">
-            {{ item }} {% if not loop.index > qr_limit %}
-            <div class="qrcode"></div>
-            {% endif %}
+            {{ item }}
         </a>
+        {% if not loop.index > qr_limit %}
+        <div class="qrcode"></div>
+        {% endif %}
     </li>
     {% endfor %}
 </ol>
@@ -40,13 +41,17 @@ queue_items %}
 <script>
     window.addEventListener("load", (_) => {
         document.querySelectorAll(".qrcode").forEach((e) => {
-            const a = e.parentElement.textContent.trim();
-            new QRCode(e, {
-                text: a,
-                correctLevel: QRCode.CorrectLevel.L,
-                width: 256,
-                height: 256,
-            });
+            // Find the sibling <a> tag within the same <li>
+            const link = e.parentElement.querySelector("a");
+            const a = link ? link.textContent.trim() : "";
+            if (a) {
+                new QRCode(e, {
+                    text: a,
+                    correctLevel: QRCode.CorrectLevel.L,
+                    width: 256,
+                    height: 256,
+                });
+            }
         });
     });
 </script>