Fix Bootstrap 5 compatibility issues

- Fix popover initialization to use Bootstrap 5 native API instead of jQuery-style initialization
- Replace btn-xs with btn-sm (Bootstrap 5 removed btn-xs)
- Fix in base.html, embed_instructions.html, and my_polls.js

Resolves Sentry error: .popover is not a function

Author: fsargent

approval_polls/staticfiles/my_polls.js

@@ -16,10 +16,10 @@ $(function () {
       "<p>This poll will be permanently deleted. " +
       "<button id='confirm-delete-" +
       pollId +
-      "' type='button' class='btn btn-danger btn-xs'>Delete</button> " +
+      "' type='button' class='btn btn-danger btn-sm'>Delete</button> " +
       "<button id='cancel-delete-" +
       pollId +
-      "' type='button' class='btn btn-primary btn-xs'>Cancel</button>" +
+      "' type='button' class='btn btn-primary btn-sm'>Cancel</button>" +
       "</p></div>";
 
     if ($("#alert" + pollId).length == 0) {

approval_polls/templates/base.html

@@ -128,8 +128,15 @@
                 crossorigin="anonymous"></script>
         <script>
             $(function () {
-                $('[data-toggle="tooltip"]').tooltip();
-                $('[data-toggle="popover"]').popover();
+                // Initialize tooltips and popovers with Bootstrap 5 syntax
+                var tooltipElements = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+                tooltipElements.forEach(function(element) {
+                    new bootstrap.Tooltip(element);
+                });
+                var popoverElements = document.querySelectorAll('[data-bs-toggle="popover"]');
+                popoverElements.forEach(function(element) {
+                    new bootstrap.Popover(element);
+                });
             });
         </script>
         {% block extra_js %}

approval_polls/templates/embed_instructions.html

@@ -12,7 +12,7 @@ <h4>Put this code in your site</h4>
             <div class = 'form-group'>
                 <textarea id='textAreaCode' class = 'form-control' readonly></textarea>
             </div>
-            <button id= "copyText" class="btn mt-2 btn-primary btn-xs">Copy to Clipboard</button>
+            <button id= "copyText" class="btn mt-2 btn-primary btn-sm">Copy to Clipboard</button>
         </div>
     </div>
 {% endblock %}