Reorder panels and add collapsible JSON Data pane

[Copilot]

Reorders the three-panel layout to improve logical data flow (JSON Data → Template → Output) and adds collapse/expand functionality to the JSON Data panel for workspace optimization.

Changes

• Panel reordering: JSON Data (left), Nunjucks Template (center), Output (right)
• Collapsible JSON panel: Toggle button (◀/▶) in panel header with smooth CSS transitions
• Responsive layout: Media queries for mobile/tablet with vertical stacking at ≤768px breakpoints
• Accessibility: ARIA attributes (aria-label, aria-expanded) for screen reader support

Implementation

// Toggle with proper ARIA state management
toggleJsonBtn.addEventListener('click', (e) => {
    e.stopPropagation();
    const isCollapsed = jsonPanel.classList.toggle('collapsed');
    toggleJsonBtn.textContent = isCollapsed ? '▶' : '◀';
    toggleJsonBtn.setAttribute('aria-expanded', isCollapsed ? 'false' : 'true');
});

.panel.collapsed {
    flex: 0 0 auto;
    min-width: 40px;
}

.panel.collapsed .panel-header {
    writing-mode: vertical-rl;
}

Screenshots

Normal view – All panels expanded:

Collapsed view – JSON panel minimized for maximum workspace:

Mobile view – Responsive vertical layout:

Original prompt

Das 'JSON Data'-Pane soll links positioniert werden und bei Bedarf zuklappbar (collapse/expand) sein. Das 'Nunjucks Template'-Pane soll in die Mitte, direkt rechts von 'JSON Data' und links vom 'Output (HTML Preview)'. Damit bekommt der Arbeitsbereich eine logische Reihenfolge und mehr nutzbare Fläche. Die Umsetzung soll responsiv und benutzerfreundlich sein.

This pull request was created from Copilot chat.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.