Tweaks to style and popover DOM placement.

Reduce the padding on the card headers in the results popover.

Make the popover container the parent element of the feedback button.
In most cases this will result in the popover being in the DOM
immediately after the feedback button, and thus also immediately after
the button in the tab order.

Make clicking on the popover header close it.  Note that this does not
have interactive semantics other than a pointer cursor when the mouse is
over it, and is not focusable.  That is probably okay since this would
be an annoying tab stop for keyboard users, and keyboard users can
already open and close the popover with the button.

htdocs/js/Feedback/feedback.js

@@ -3,7 +3,7 @@
 		if (feedbackBtn.dataset.popoverInitialized) return;
 		feedbackBtn.dataset.popoverInitialized = 'true';
 
-		new bootstrap.Popover(feedbackBtn, { sanitize: false });
+		new bootstrap.Popover(feedbackBtn, { sanitize: false, container: feedbackBtn.parentElement });
 
 		// Render MathJax previews.
 		if (window.MathJax) {
@@ -21,6 +21,8 @@
 				newScript.appendChild(document.createTextNode(origScript.innerHTML));
 				origScript.parentNode.replaceChild(newScript, origScript);
 			});
+			const popoverHeader = bsPopover.tip?.querySelector('.popover-header');
+			bsPopover.tip?.querySelector('.popover-header')?.addEventListener('click', () => bsPopover?.hide());
 		});
 	};
 

htdocs/js/Problem/problem.scss

@@ -223,6 +223,7 @@
 		.popover-header {
 			--bs-popover-header-bg: var(--bs-success);
 			--bs-popover-header-color: white;
+			cursor: pointer;
 		}
 	}
 

macros/PG.pl

@@ -1239,7 +1239,7 @@ sub ENDDOCUMENT {
 					return '' unless defined $line && $line =~ /\S/;
 					return Mojo::DOM->new_tag(
 						'div',
-						class => 'card-header text-center',
+						class => 'card-header text-center p-1',
 						sub { Mojo::DOM->new_tag('h4', class => 'card-title fs-6 m-0', $title); }
 					) . Mojo::DOM->new_tag('div', class => "card-body text-center $class", sub {$line});
 				}