feat: Enhance dropdown functionality and improve table responsiveness in forces list

Author: cantis

app/templates/forces/list.html

@@ -1,6 +1,19 @@
 {% extends 'base.html' %}
 {% block content %}
 
+<style>
+    /* Fix dropdown clipping in table-responsive */
+    .table-responsive {
+        overflow: visible !important;
+    }
+
+    @media (max-width: 767.98px) {
+        .table-responsive {
+            overflow-x: auto;
+        }
+    }
+</style>
+
 <div class="d-flex justify-content-between align-items-center mb-3">
     <h2 class="m-0">Forces</h2>
     <div>
@@ -65,10 +78,10 @@ <h2 class="m-0">Forces</h2>
                         </a>
                         <div class="dropdown">
                             <button class="btn btn-link p-0 text-decoration-none" data-bs-toggle="dropdown"
-                                title="More actions">
+                                data-bs-boundary="viewport" aria-expanded="false" title="More actions">
                                 <i class="fa-solid fa-ellipsis-vertical"></i>
                             </button>
-                            <ul class="dropdown-menu">
+                            <ul class="dropdown-menu dropdown-menu-end">
                                 <li>
                                     <a class="dropdown-item" href="#"
                                         onclick="event.preventDefault(); renameForce({{ force.id }}, '{{ force.name }}')">