From 8b76324ae6a16fae1ee8f3bb3fcadbec09e3c0ea Mon Sep 17 00:00:00 2001
From: Glenn Rice <grice1@missouriwestern.edu>
Date: Tue, 24 Oct 2023 17:19:08 -0500
Subject: [PATCH] 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 | 8 ++++++--
 htdocs/js/Problem/problem.scss | 1 +
 macros/PG.pl                   | 2 +-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/htdocs/js/Feedback/feedback.js b/htdocs/js/Feedback/feedback.js
index ee39da494c..b7271cee39 100644
--- a/htdocs/js/Feedback/feedback.js
+++ b/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) {
@@ -12,15 +12,19 @@
 			});
 		}
 
-		// Execute javascript in the answer preview.
 		feedbackBtn.addEventListener('shown.bs.popover', () => {
 			const bsPopover = bootstrap.Popover.getInstance(feedbackBtn);
+
+			// Execute javascript in the answer preview.
 			bsPopover.tip?.querySelectorAll('script').forEach((origScript) => {
 				const newScript = document.createElement('script');
 				Array.from(origScript.attributes).forEach((attr) => newScript.setAttribute(attr.name, attr.value));
 				newScript.appendChild(document.createTextNode(origScript.innerHTML));
 				origScript.parentNode.replaceChild(newScript, origScript);
 			});
+
+			// Make a click on the popover header close the popover.
+			bsPopover.tip?.querySelector('.popover-header')?.addEventListener('click', () => bsPopover?.hide());
 		});
 	};
 
diff --git a/htdocs/js/Problem/problem.scss b/htdocs/js/Problem/problem.scss
index bba7d0de77..b2ee8ea366 100644
--- a/htdocs/js/Problem/problem.scss
+++ b/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;
 		}
 	}
 
diff --git a/macros/PG.pl b/macros/PG.pl
index 5c4b8b1531..2770286d50 100644
--- a/macros/PG.pl
+++ b/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});
 				}