From 9818f2f0db4259a838d954f99258b67320e1da1c Mon Sep 17 00:00:00 2001
From: Leopold Strobl <leopold.strobl@vt-media.de>
Date: Fri, 3 Jul 2026 10:59:53 +0200
Subject: [PATCH] ROI: Search-Bar der DataTables bleibt beim horizontalen
 Scrollen fest angedockt
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/dist/ROI.php b/dist/ROI.php
index 4ee81de..f1e99f2 100644
--- a/dist/ROI.php
+++ b/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>
@@ -1249,7 +1248,6 @@ function slotsToDisplay(array $slotMap): array {
                                 Slots: auftragsbasiert, SIGNED (Storno gibt Slots frei und bucht auf die gleichen Zeiträume zurück).
                                 Storno-Erkennung: Rechnung mit <span class="mono">sum_net &lt; 0</span>.
                             </small>
-                        </div>
                     </div>
                 </div>
 
@@ -1258,7 +1256,6 @@ function slotsToDisplay(array $slotMap): array {
                         <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>
@@ -1309,7 +1306,6 @@ function slotsToDisplay(array $slotMap): array {
                                 Ext-Menge ist Anzahl; Umsatz extern ist anteilig berechnet.
                                 Menge(signed) ist für Peak/Slots relevant (Storno-Rechnung -> negativ).
                             </small>
-                        </div>
                     </div>
                 </div>
 
@@ -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') || '';