ROI: Search-Bar der DataTables bleibt beim horizontalen Scrollen fest angedockt

Bisher lagen Search-Feld, Length-Selector und Pagination innerhalb eines
äußeren .table-responsive-Containers und sind beim horizontalen Scrollen
mitgewandert. Jetzt übernimmt DataTables via scrollX das horizontale
Scrolling der Tabelle selbst, sodass die Bedienelemente außerhalb des
Scroll-Bereichs bleiben.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

dist/ROI.php

@@ -1132,7 +1132,6 @@ function slotsToDisplay(array $slotMap): array {
                         </a>
                     </div>
                     <div class="card-body">
-                        <div class="table-responsive">
                             <table class="table table-bordered" id="pivotTable" width="100%" cellspacing="0">
                                 <thead>
                                 <tr>
@@ -1251,14 +1250,12 @@ function slotsToDisplay(array $slotMap): array {
                             </small>
                     </div>
                 </div>
-                </div>
 
                 <div class="card mb-4">
                     <div class="card-header">
                         <i class="fas fa-list mr-1"></i> Debug: verarbeitete Mietpositionen
                     </div>
                     <div class="card-body">
-                        <div class="table-responsive">
                             <table class="table table-bordered" id="detailTable" width="100%" cellspacing="0">
                                 <thead>
                                 <tr>
@@ -1311,7 +1308,6 @@ function slotsToDisplay(array $slotMap): array {
                             </small>
                     </div>
                 </div>
-                </div>
 
 <?php endif; // $computeRoi ?>
 
@@ -1504,8 +1500,10 @@ function openSlots(title, payload) {
 }
 
 $(function() {
-    $('#pivotTable').DataTable({ pageLength: 50, order: [[4,'desc']] });
-    $('#detailTable').DataTable({ pageLength: 50, order: [[1,'desc']] });
+    // scrollX: DataTables kümmert sich selbst um horizontales Scrollen der Tabelle,
+    // damit Search/Length/Pagination NICHT mit dem Scrollbalken mitwandern.
+    $('#pivotTable').DataTable({ pageLength: 50, order: [[4,'desc']], scrollX: true });
+    $('#detailTable').DataTable({ pageLength: 50, order: [[1,'desc']], scrollX: true });
 
     $(document).on('click', '.js-hist', function() {
         const title = $(this).data('title') || '';