fixed ticket card folding

Modules/Helpdesk/Resources/views/livewire/ticket-show.blade.php

@@ -23,6 +23,7 @@
 @endphp
 
 
+<div data-dusk="helpdesk-ticket-show" dusk="helpdesk-ticket-show" class="hd-helpdesk-surface space-y-4">
 <style>
     [data-helpdesk-sidebar-cards] > div > :first-child {
         cursor: pointer;
@@ -64,8 +65,6 @@
         display: block;
     }
 </style>
-
-<div data-dusk="helpdesk-ticket-show" dusk="helpdesk-ticket-show" class="hd-helpdesk-surface space-y-4">
     <div
         class="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
         <div class="bg-gradient-to-br from-slate-950 via-slate-900 to-blue-950 px-5 py-4 text-white">
@@ -904,25 +903,26 @@
                     return span.innerHTML;
                 }
 
-                document.addEventListener('DOMContentLoaded', function () {
+                initialiseHelpdeskTicketShowInteractions();
+                document.addEventListener('DOMContentLoaded', initialiseHelpdeskTicketShowInteractions);
+                document.addEventListener('livewire:navigated', initialiseHelpdeskTicketShowInteractions);
+                document.addEventListener('livewire:init', initialiseHelpdeskTicketShowInteractions);
+
+                function initialiseHelpdeskTicketShowInteractions() {
                     document.querySelectorAll('[data-helpdesk-rich-editor]').forEach((editor) => syncRichEditor(editor));
                     updateCommentToggleButtons();
                     initialiseHelpdeskSidebarCards();
-                });
+                }
-
-
 
                 function initialiseHelpdeskSidebarCards() {
                     const sidebar = document.querySelector('[data-helpdesk-sidebar-cards]');
 
-                    if (!sidebar || sidebar.dataset.helpdeskSidebarInitialised === 'true') {
+                    if (!sidebar) {
                         return;
                     }
 
-                    sidebar.dataset.helpdeskSidebarInitialised = 'true';
-
                     Array.from(sidebar.children).forEach((card) => {
-                        if (!(card instanceof HTMLElement) || card.tagName.toLowerCase() === 'details') {
+                        if (!(card instanceof HTMLElement)) {
                             return;
                         }
 
@@ -932,32 +932,60 @@
                             return;
                         }
 
-                        const details = document.createElement('details');
+                        card.dataset.helpdeskSidebarCard = 'true';
-                        details.className = card.className;
+                        card.dataset.open = card.dataset.open || 'false';
-                        details.dataset.helpdeskSidebarCard = 'true';
+                        header.dataset.helpdeskSidebarCardHeader = 'true';
-                        details.open = false;
+                        header.setAttribute('role', 'button');
+                        header.setAttribute('tabindex', '0');
+                        header.setAttribute('aria-expanded', card.dataset.open === 'true' ? 'true' : 'false');
+                    });
 
-                        const summary = document.createElement('summary');
+                    if (sidebar.dataset.helpdeskSidebarInitialised === 'true') {
-                        summary.className = 'cursor-pointer list-none marker:hidden';
+                        return;
-                        header.classList.add('relative', 'pr-10');
+                    }
 
-                        const chevron = document.createElement('span');
+                    sidebar.dataset.helpdeskSidebarInitialised = 'true';
-                        chevron.className = 'pointer-events-none absolute right-4 top-1/2 -translate-y-1/2 text-white/80 transition group-open:rotate-180';
-                        chevron.innerHTML = '<i class="fa-solid fa-chevron-down" aria-hidden="true"></i>';
-                        header.appendChild(chevron);
-                        summary.appendChild(header);
 
-                        const body = document.createElement('div');
+                    sidebar.addEventListener('click', function (event) {
-                        body.className = 'pt-4';
+                        const header = event.target.closest('[data-helpdesk-sidebar-card-header]');
 
-                        while (card.firstChild) {
+                        if (!header || !sidebar.contains(header)) {
-                            body.appendChild(card.firstChild);
+                            return;
                         }
 
-                        details.appendChild(summary);
+                        if (event.target.closest('a, button, input, select, textarea, label, dialog')) {
-                        details.appendChild(body);
+                            return;
-                        card.replaceWith(details);
+                        }
+
+                        toggleHelpdeskSidebarCard(header);
                     });
+
+                    sidebar.addEventListener('keydown', function (event) {
+                        if (!['Enter', ' '].includes(event.key)) {
+                            return;
+                        }
+
+                        const header = event.target.closest('[data-helpdesk-sidebar-card-header]');
+
+                        if (!header || !sidebar.contains(header)) {
+                            return;
+                        }
+
+                        event.preventDefault();
+                        toggleHelpdeskSidebarCard(header);
+                    });
+                }
+
+                function toggleHelpdeskSidebarCard(header) {
+                    const card = header.closest('[data-helpdesk-sidebar-card]');
+
+                    if (!card) {
+                        return;
+                    }
+
+                    const isOpen = card.dataset.open === 'true';
+                    card.dataset.open = isOpen ? 'false' : 'true';
+                    header.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
                 }
 
                 function wrapSelection(textarea, before, after) {

Modules/Helpdesk/Tests/Feature/TicketSidebarCardsExpandableFilesTest.php

@@ -0,0 +1,43 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Modules\Helpdesk\Tests\Feature;
+
+use PHPUnit\Framework\TestCase;
+
+final class TicketSidebarCardsExpandableFilesTest extends TestCase
+{
+    /**
+     * Ticket show sidebar cards must be expandable after normal page loads and Livewire navigation.
+     */
+    public function test_ticket_show_sidebar_cards_have_livewire_safe_expand_toggle(): void
+    {
+        $viewPath = dirname(__DIR__, 2) . '/Resources/views/livewire/ticket-show.blade.php';
+        $view = file_get_contents($viewPath);
+
+        self::assertIsString($view);
+        self::assertStringContainsString('data-helpdesk-sidebar-cards', $view);
+        self::assertStringContainsString('data-helpdesk-sidebar-card-header', $view);
+        self::assertStringContainsString('toggleHelpdeskSidebarCard', $view);
+        self::assertStringContainsString("document.addEventListener('livewire:navigated', initialiseHelpdeskTicketShowInteractions);", $view);
+        self::assertStringContainsString("document.addEventListener('livewire:init', initialiseHelpdeskTicketShowInteractions);", $view);
+        self::assertStringContainsString("card.dataset.open = isOpen ? 'false' : 'true';", $view);
+        self::assertStringContainsString("header.setAttribute('aria-expanded', isOpen ? 'false' : 'true');", $view);
+    }
+
+    /**
+     * Inline styles must stay inside the Livewire root element so the component root remains stable.
+     */
+    public function test_ticket_show_does_not_place_style_before_livewire_root(): void
+    {
+        $viewPath = dirname(__DIR__, 2) . '/Resources/views/livewire/ticket-show.blade.php';
+        $view = file_get_contents($viewPath);
+
+        self::assertIsString($view);
+        self::assertLessThan(
+            strpos($view, '<style>'),
+            strpos($view, '<div data-dusk="helpdesk-ticket-show"'),
+        );
+    }
+}

Modules/Helpdesk/changelog.yaml

@@ -491,3 +491,15 @@
     - Logged rejected Gitea deliveries against the matched repository after payload parsing so future webhook failures are visible in Helpdesk Git webhook logs.
     - Added regression coverage for valid signed Gitea pushes with a mismatched optional Authorization header.
     - Preserved append-only changelog history.
+
+
+- version: 1.10.21
+  date: 2026-06-24
+  type: bugfix
+  summary: Restore expandable right-hand cards on Helpdesk ticket view.
+  changes:
+    - Reworked the ticket show right-hand card toggles so Ticket details, SLA metrics, Requester profile, Checklist, Git commits and Ticket controls expand and collapse without depending on a one-time DOMContentLoaded-only conversion.
+    - Reinitialised ticket show interactions after Livewire navigation and Livewire initialisation so expandable sidebar cards continue working after wire:navigate page visits.
+    - Moved the ticket show inline sidebar styles inside the Livewire root container to preserve stable Livewire component markup.
+    - Added file-level regression coverage for Livewire-safe sidebar card expansion behaviour.
+    - Preserved append-only changelog history.

Modules/Helpdesk/module.json

@@ -23,5 +23,5 @@
         "Modules\\Helpdesk\\Providers\\HelpdeskServiceProvider"
     ],
     "files": [],
-    "version": "1.10.20"
+    "version": "1.10.21"
 }