Merge pull request #1054 from drgrice1/feedback-popover-close-btn

Remove the feedback header click close behavior and instead add a close button.

Author: Alex-Jordan

htdocs/js/Feedback/feedback.js

@@ -41,7 +41,7 @@
 
 			// Make a click on the popover header close the popover.
 			feedbackPopover.tip
-				?.querySelector('.popover-header')
+				?.querySelector('.popover-header .btn-close')
 				?.addEventListener('click', () => feedbackPopover.hide());
 
 			if (feedbackPopover.tip) feedbackPopover.tip.dataset.iframeHeight = '1';

htdocs/js/Problem/problem.scss

@@ -230,6 +230,12 @@
 		cursor: pointer;
 		--bs-popover-header-bg: var(--bs-info);
 		--bs-popover-header-color: white;
+
+		.btn-close {
+			--bs-btn-close-opacity: 0.75;
+			--bs-btn-close-hover-opacity: 1;
+			--bs-btn-close-focus-shadow: 0 0 0 0.15rem #00000080;
+		}
 	}
 
 	&.correct {

macros/PG.pl

@@ -1197,7 +1197,21 @@ sub ENDDOCUMENT {
 						: $options{resultTitle}
 					),
 					data => {
-						bs_title               => $options{resultTitle},
+						bs_title => Mojo::DOM->new_tag(
+							'div',
+							class           => 'd-flex align-items-center justify-content-between',
+							'data-bs-theme' => 'dark',
+							sub {
+								Mojo::DOM->new_tag('span', style => 'width:20.4px')
+									. Mojo::DOM->new_tag('span', class => 'mx-3', $options{resultTitle})
+									. Mojo::DOM->new_tag(
+										'button',
+										type         => 'button',
+										class        => 'btn-close',
+										'aria-label' => maketext('Close')
+									);
+							}
+						)->to_string,
 						bs_toggle              => 'popover',
 						bs_trigger             => 'click',
 						bs_placement           => 'bottom',