Popover ordering.

Move a popover to the front when it first opens, if it is clicked in, or
if focus moves into it.  Other popovers are behind the "active" popover
in the order they appear in the DOM.

htdocs/js/Feedback/feedback.js

@@ -1,4 +1,6 @@
 (() => {
+	const feedbackPopovers = [];
+
 	const initializeFeedback = (feedbackBtn) => {
 		if (feedbackBtn.dataset.popoverInitialized) return;
 		feedbackBtn.dataset.popoverInitialized = 'true';
@@ -7,6 +9,7 @@
 			sanitize: false,
 			container: feedbackBtn.parentElement
 		});
+		feedbackPopovers.push(feedbackPopover);
 
 		// Render MathJax previews.
 		if (window.MathJax) {
@@ -25,6 +28,17 @@
 				setTimeout(() => feedbackPopover.update());
 			});
 
+			const moveToFront = () => {
+				if (feedbackPopover.tip) feedbackPopover.tip.style.zIndex = 18;
+				for (const popover of feedbackPopovers) {
+					if (popover === feedbackPopover) continue;
+					if (popover.tip) popover.tip.style.setProperty('z-index', null);
+				}
+			};
+			feedbackPopover.tip?.addEventListener('click', moveToFront);
+			feedbackPopover.tip?.addEventListener('focusin', moveToFront);
+			moveToFront();
+
 			// Make a click on the popover header close the popover.
 			feedbackPopover.tip
 				?.querySelector('.popover-header')

htdocs/js/Problem/problem.scss

@@ -213,7 +213,7 @@
 	--bs-popover-body-padding-x: 0;
 	--bs-popover-body-padding-y: 0;
 	--bs-popover-max-width: 600px;
-	--bs-popover-zindex: 18;
+	--bs-popover-zindex: 17;
 	position: absolute;
 	min-width: 200px;