Fix #48: Draggable Split-Pane für Belegvorschau und Buchungsdetails

public/static/css/app.css

@@ -349,13 +349,15 @@ td { padding: .65rem 1rem; vertical-align: middle; }
 
 /* ── Beleg Detail (Split-Pane) ───────────────────────────────── */
 .beleg-layout {
-    display: grid;
+    display: flex;
-    grid-template-columns: 1fr 520px;
-    gap: 1.5rem;
     align-items: start;
+    gap: 0;
 }
 
 .beleg-preview {
+    flex: 0 0 auto;
+    width: var(--beleg-preview-width, calc(100% - 520px - 8px));
+    min-width: 200px;
     background: var(--color-surface);
     border: 1px solid var(--color-border);
     border-radius: var(--radius);
@@ -371,6 +373,42 @@ td { padding: .65rem 1rem; vertical-align: middle; }
     display: block;
 }
 
+.beleg-layout-right {
+    flex: 1 1 0;
+    min-width: 320px;
+    margin-left: 1.5rem;
+}
+
+.split-handle {
+    flex: 0 0 8px;
+    width: 8px;
+    align-self: stretch;
+    cursor: col-resize;
+    background: transparent;
+    position: relative;
+    margin: 0 2px;
+    z-index: 10;
+}
+
+.split-handle::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 4px;
+    background: var(--color-border);
+    border-radius: 2px;
+    transition: background .15s;
+}
+
+.split-handle:hover::before,
+.split-handle.dragging::before {
+    background: var(--color-primary, #2563eb);
+    width: 4px;
+}
+
 /* ── Invoice preview (DIN 5008) ──────────────────────────────── */
 .invoice-preview thead th {
     text-transform: none;

src/Views/belege/detail.php

@@ -159,10 +159,10 @@ $suppliers = $suppliers ?? [];
 </div>
 
 <!-- Split-Pane: Vorschau + Buchungsformular -->
-<div class="beleg-layout">
+<div class="beleg-layout" id="beleg-split-layout">
 
     <!-- Linke Seite: Dokumentvorschau -->
-    <div class="beleg-preview">
+    <div class="beleg-preview" id="beleg-preview-pane">
         <?php if (in_array($beleg['mime_type'], ['application/pdf'])): ?>
             <iframe src="/belege/<?= $h($beleg['id']) ?>/file" title="Belegvorschau"></iframe>
         <?php elseif (str_starts_with($beleg['mime_type'], 'image/')): ?>
@@ -176,8 +176,11 @@ $suppliers = $suppliers ?? [];
         <?php endif; ?>
     </div>
 
+    <!-- Trennlinie (Drag-Handle) -->
+    <div class="split-handle" id="beleg-split-handle" title="Ziehen zum Anpassen der Breite"></div>
+
     <!-- Rechte Seite: Buchungen -->
-    <div>
+    <div class="beleg-layout-right">
 
         <!-- Vorhandene Buchungen -->
         <div class="card mb-2">
@@ -1205,3 +1208,59 @@ document.addEventListener('DOMContentLoaded', function() {
 });
 </script>
 <?php endif; ?>
+
+<script>
+(function () {
+    const STORAGE_KEY = 'beleg_split_width';
+    const layout  = document.getElementById('beleg-split-layout');
+    const preview = document.getElementById('beleg-preview-pane');
+    const handle  = document.getElementById('beleg-split-handle');
+    if (!layout || !preview || !handle) return;
+
+    function applyWidth(px) {
+        preview.style.width = px + 'px';
+        preview.style.setProperty('--beleg-preview-width', px + 'px');
+    }
+
+    function savedWidth() {
+        const stored = parseInt(localStorage.getItem(STORAGE_KEY), 10);
+        if (!isNaN(stored) && stored > 0) return stored;
+        return Math.round(layout.offsetWidth * 0.55);
+    }
+
+    applyWidth(savedWidth());
+
+    let dragging = false;
+    let startX   = 0;
+    let startW   = 0;
+
+    handle.addEventListener('mousedown', function (e) {
+        e.preventDefault();
+        dragging = true;
+        startX   = e.clientX;
+        startW   = preview.offsetWidth;
+        handle.classList.add('dragging');
+        document.body.style.cursor      = 'col-resize';
+        document.body.style.userSelect  = 'none';
+    });
+
+    document.addEventListener('mousemove', function (e) {
+        if (!dragging) return;
+        const delta  = e.clientX - startX;
+        const total  = layout.offsetWidth;
+        const minR   = 320;
+        const maxW   = total - minR - handle.offsetWidth;
+        const newW   = Math.max(200, Math.min(maxW, startW + delta));
+        applyWidth(newW);
+    });
+
+    document.addEventListener('mouseup', function () {
+        if (!dragging) return;
+        dragging = false;
+        handle.classList.remove('dragging');
+        document.body.style.cursor     = '';
+        document.body.style.userSelect = '';
+        localStorage.setItem(STORAGE_KEY, preview.offsetWidth);
+    });
+}());
+</script>

src/version.txt

@@ -1 +1 @@
-1-260421
+1-260425