From f8e5359777e0f0f2ddc8b555d2b94fceb55e5545 Mon Sep 17 00:00:00 2001
From: Mark Gregory <mark.gregory@mpba.co.uk>
Date: Mon, 22 Jun 2026 08:01:33 +0100
Subject: [PATCH] fully working tests now with coverage for warehouse

---
 .../views/livewire/ticket-show.blade.php      | 589 ++++++++++--------
 1 file changed, 343 insertions(+), 246 deletions(-)

diff --git a/Modules/Helpdesk/Resources/views/livewire/ticket-show.blade.php b/Modules/Helpdesk/Resources/views/livewire/ticket-show.blade.php
index 6e990248..de92d0cc 100644
--- a/Modules/Helpdesk/Resources/views/livewire/ticket-show.blade.php
+++ b/Modules/Helpdesk/Resources/views/livewire/ticket-show.blade.php
@@ -1,32 +1,42 @@
 @php
+    use Illuminate\Support\Str;
+
     $currentUser = auth()->user();
     $currentCompany = $currentUser?->company;
     $canSeeInternalNotes = (bool) ($currentCompany?->is_system_company ?? false)
-        || \Illuminate\Support\Str::lower((string) ($currentCompany?->slug ?? '')) === 'mpba-limited'
-        || \Illuminate\Support\Str::contains(\Illuminate\Support\Str::lower((string) ($currentCompany?->name ?? '')), 'mpba');
+        || Str::lower((string) ($currentCompany?->slug ?? '')) === 'mpba-limited'
+        || Str::contains(Str::lower((string) ($currentCompany?->name ?? '')), 'mpba');
     $visibleCommentCount = $ticket->comments->count();
 @endphp
 
-<div data-dusk="helpdesk-ticket-show" dusk="helpdesk-ticket-show" class="hd-helpdesk-surface space-y-6">
-    <div class="overflow-hidden rounded-3xl 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-6 py-7 text-white">
-            <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
-                <div>
+<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">
+            <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+                <div class="min-w-0">
                     <div class="mb-2 flex flex-wrap items-center gap-2">
                         <span class="font-mono text-xs text-blue-100">{{ $ticket->reference }}</span>
                         <flux:badge color="{{ $ticket->status->color }}">{{ $ticket->status->name }}</flux:badge>
                         <flux:badge color="{{ $ticket->priority->color }}">{{ $ticket->priority->name }}</flux:badge>
                     </div>
-                    <h1 class="text-3xl font-semibold tracking-tight">{{ $ticket->subject }}</h1>
-                    <p class="mt-2 text-sm text-blue-100/90">Raised by {{ $ticket->owner?->name ?? 'Unknown user' }} · Assigned to {{ $ticket->agent?->name ?? 'Unassigned' }}</p>
+
+                    <h1 class="truncate text-2xl font-semibold tracking-tight">{{ $ticket->subject }}</h1>
+
+                    <p class="mt-1 text-xs text-blue-100/90">
+                        Raised by {{ $ticket->owner?->name ?? 'Unknown user' }} · Assigned to {{ $ticket->agent?->name ?? 'Unassigned' }}
+                    </p>
                 </div>
+
                 <div class="flex flex-wrap gap-2">
-                    <a href="{{ route('helpdesk.tickets.index') }}" wire:navigate class="inline-flex items-center rounded-xl bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-700">
-                        <i class="fa-solid fa-arrow-left mr-2" aria-hidden="true"></i> Back
+                    <a href="{{ route('helpdesk.tickets.index') }}" wire:navigate class="inline-flex items-center rounded-lg bg-blue-600 px-3 py-2 text-xs font-bold text-white shadow-sm hover:bg-blue-700">
+                        <i class="fa-solid fa-arrow-left mr-2" aria-hidden="true"></i>
+                        Back
                     </a>
+
                     @can('update', $ticket)
-                        <a href="{{ route('helpdesk.tickets.edit', $ticket) }}" wire:navigate class="inline-flex items-center rounded-xl bg-emerald-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-emerald-700">
-                            <i class="fa-solid fa-pen-to-square mr-2" aria-hidden="true"></i> Edit
+                        <a href="{{ route('helpdesk.tickets.edit', $ticket) }}" wire:navigate class="inline-flex items-center rounded-lg bg-emerald-600 px-3 py-2 text-xs font-bold text-white shadow-sm hover:bg-emerald-700">
+                            <i class="fa-solid fa-pen-to-square mr-2" aria-hidden="true"></i>
+                            Edit
                         </a>
                     @endcan
                 </div>
@@ -34,100 +44,113 @@
         </div>
     </div>
 
-    <div class="grid gap-6 lg:grid-cols-3">
-        <div class="space-y-6 lg:col-span-2">
-            <article class="overflow-hidden rounded-[2rem] border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
-                <div class="bg-gradient-to-r from-slate-950 via-blue-950 to-slate-900 px-7 py-8 text-white sm:px-10">
-                    <div class="flex flex-col gap-6 xl:flex-row xl:items-center xl:justify-between">
-                        <div class="flex min-w-0 items-start gap-5">
-                            <span class="inline-flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-blue-500/20 text-white ring-1 ring-white/25 shadow-lg shadow-black/20">
-                                <i class="fa-solid fa-file-lines text-xl" aria-hidden="true"></i>
+    <div class="grid gap-4 lg:grid-cols-3">
+        <div class="space-y-4 lg:col-span-2">
+            <article 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-r from-slate-950 via-blue-950 to-slate-900 px-5 py-5 text-white sm:px-6">
+                    <div class="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
+                        <div class="flex min-w-0 items-start gap-3">
+                            <span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-blue-500/20 text-white ring-1 ring-white/25 shadow-sm">
+                                <i class="fa-solid fa-file-lines text-base" aria-hidden="true"></i>
                             </span>
-                            <div class="min-w-0 space-y-2">
-                                <p class="text-xs font-black uppercase tracking-[0.22em] text-blue-200">Ticket document</p>
-                                <h2 class="text-2xl font-extrabold tracking-tight text-white sm:text-3xl">Request details</h2>
-                                <p class="max-w-4xl text-base font-medium leading-7 text-blue-50/90">Original request content recorded against this helpdesk ticket.</p>
+
+                            <div class="min-w-0 space-y-1">
+                                <p class="text-[0.68rem] font-black uppercase tracking-[0.18em] text-blue-200">Ticket document</p>
+                                <h2 class="text-xl font-extrabold tracking-tight text-white sm:text-2xl">Request details</h2>
+                                <p class="max-w-4xl text-sm font-medium leading-5 text-blue-50/90">Original request content recorded against this helpdesk ticket.</p>
                             </div>
                         </div>
 
-                        <span class="inline-flex w-fit shrink-0 items-center gap-3 rounded-2xl bg-white/15 px-5 py-3 text-base font-extrabold text-blue-50 ring-1 ring-white/20 shadow-sm">
+                        <span class="inline-flex w-fit shrink-0 items-center gap-2 rounded-xl bg-white/15 px-3 py-2 text-xs font-extrabold text-blue-50 ring-1 ring-white/20 shadow-sm">
                             <i class="fa-solid fa-hashtag" aria-hidden="true"></i>
                             {{ $ticket->reference }}
                         </span>
                     </div>
                 </div>
 
-                <div class="p-7 sm:p-10">
-                    <div class="hd-ticket-body-card min-h-[18rem] rounded-[1.75rem] border border-zinc-200 bg-zinc-50/80 px-8 py-9 text-zinc-900 shadow-inner dark:border-zinc-700 dark:bg-zinc-950/80 dark:text-zinc-100 sm:min-h-[24rem] sm:px-10 sm:py-10">
-                        <div class="prose max-w-none text-lg leading-9 dark:prose-invert sm:text-xl sm:leading-10">
+                <div class="p-5 sm:p-6">
+                    <div class="hd-ticket-body-card min-h-[10rem] rounded-2xl border border-zinc-200 bg-zinc-50/80 px-5 py-5 text-zinc-900 shadow-inner dark:border-zinc-700 dark:bg-zinc-950/80 dark:text-zinc-100 sm:min-h-[12rem] sm:px-6 sm:py-6">
+                        <div class="prose max-w-none text-sm leading-6 dark:prose-invert sm:text-base sm:leading-7">
                             {!! $ticket->body !!}
                         </div>
                     </div>
                 </div>
             </article>
 
-            <details open class="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900" data-helpdesk-supporting-files-card>
-                <summary class="flex cursor-pointer list-none items-center justify-between gap-5 bg-gradient-to-r from-slate-950 via-blue-950 to-slate-900 px-7 py-7 text-white marker:hidden sm:px-9">
-                    <div class="flex min-w-0 items-start gap-5">
-                        <span class="inline-flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-blue-500/25 text-white ring-1 ring-white/20 shadow-lg shadow-black/20">
-                            <i class="fa-solid fa-paperclip text-xl" aria-hidden="true"></i>
+            <details class="group overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900" data-helpdesk-supporting-files-card>
+                <summary class="flex cursor-pointer list-none items-center justify-between gap-3 bg-gradient-to-r from-slate-950 via-blue-950 to-slate-900 px-4 py-3 text-white marker:hidden sm:px-5">
+                    <div class="flex min-w-0 items-center gap-3">
+                        <span class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-blue-500/25 text-white ring-1 ring-white/20">
+                            <i class="fa-solid fa-paperclip text-sm" aria-hidden="true"></i>
                         </span>
-                        <div class="min-w-0 space-y-2">
-                            <p class="text-xs font-black uppercase tracking-[0.22em] text-blue-200">Attachments</p>
-                            <h2 class="text-2xl font-extrabold tracking-tight sm:text-3xl">Supporting files</h2>
-                            <p class="text-base font-medium leading-7 text-blue-50/85">Pin screenshots, logs and supporting documents directly to this ticket.</p>
+
+                        <div class="min-w-0">
+                            <p class="text-[0.65rem] font-black uppercase tracking-[0.18em] text-blue-200">Attachments</p>
+                            <h2 class="truncate text-base font-extrabold tracking-tight">Supporting files</h2>
                         </div>
                     </div>
 
-                    <span class="inline-flex shrink-0 items-center gap-3 rounded-2xl bg-white/15 px-5 py-3 text-base font-extrabold ring-1 ring-white/20 shadow-sm">
-                        <i class="fa-solid fa-paperclip text-sm" aria-hidden="true"></i>
+                    <span class="inline-flex shrink-0 items-center gap-2 rounded-xl bg-white/15 px-3 py-1.5 text-xs font-extrabold ring-1 ring-white/20">
+                        <i class="fa-solid fa-paperclip text-xs" aria-hidden="true"></i>
                         {{ $ticket->attachments->count() }} file{{ $ticket->attachments->count() === 1 ? '' : 's' }}
                         <i class="fa-solid fa-chevron-right transition group-open:rotate-90" aria-hidden="true"></i>
                     </span>
                 </summary>
 
-                <div class="space-y-5 p-6">
+                <div class="space-y-3 p-4">
                     @can('update', $ticket)
-                        <form method="POST" action="{{ route('helpdesk.tickets.attachments.store', $ticket) }}" enctype="multipart/form-data" class="rounded-2xl border border-blue-500/25 bg-slate-950/70 p-5 shadow-sm" data-helpdesk-ticket-attachment-form>
+                        <form method="POST" action="{{ route('helpdesk.tickets.attachments.store', $ticket) }}" enctype="multipart/form-data" class="rounded-xl border border-blue-500/25 bg-slate-950/70 p-3 shadow-sm" data-helpdesk-ticket-attachment-form>
                             @csrf
-                            <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+
+                            <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
                                 <div class="min-w-0">
-                                    <p class="text-sm font-black uppercase tracking-[0.22em] text-blue-200">Add files</p>
-                                    <p class="mt-1 text-sm font-semibold text-slate-200" data-helpdesk-file-label>No files selected</p>
+                                    <p class="text-xs font-black uppercase tracking-[0.18em] text-blue-200">Add files</p>
+                                    <p class="mt-1 truncate text-xs font-semibold text-slate-200" data-helpdesk-file-label>No files selected</p>
                                 </div>
-                                <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
-                                    <label data-helpdesk-file-button class="hd-attachment-action">
+
+                                <div class="flex flex-col gap-2 sm:flex-row sm:items-center">
+                                    <label data-helpdesk-file-button class="hd-attachment-action !rounded-lg !px-3 !py-2 !text-xs">
                                         <i class="fa-solid fa-paperclip" aria-hidden="true"></i>
                                         <span>Choose files</span>
                                         <input name="attachments[]" type="file" multiple class="sr-only" data-helpdesk-file-input>
                                     </label>
-                                    <button type="submit" class="hd-attachment-action hd-attachment-action-upload">
+
+                                    <button type="submit" class="hd-attachment-action hd-attachment-action-upload !rounded-lg !px-3 !py-2 !text-xs">
                                         <i class="fa-solid fa-upload" aria-hidden="true"></i>
                                         <span>Upload</span>
                                     </button>
                                 </div>
                             </div>
+
                             @error('attachments')
-                                <p class="mt-3 text-sm font-semibold text-red-300">{{ $message }}</p>
+                            <p class="mt-2 text-xs font-semibold text-red-300">{{ $message }}</p>
                             @enderror
+
                             @error('attachments.*')
-                                <p class="mt-3 text-sm font-semibold text-red-300">{{ $message }}</p>
+                            <p class="mt-2 text-xs font-semibold text-red-300">{{ $message }}</p>
                             @enderror
                         </form>
                     @endcan
 
                     @if ($ticket->attachments->isEmpty())
-                        <div class="rounded-2xl border border-dashed border-zinc-300 p-8 text-center text-sm font-semibold text-zinc-500 dark:border-zinc-700">No supporting files have been attached yet.</div>
+                        <div class="rounded-xl border border-dashed border-zinc-300 p-4 text-center text-xs font-semibold text-zinc-500 dark:border-zinc-700">
+                            No supporting files have been attached yet.
+                        </div>
                     @else
-                        <div class="grid gap-3 sm:grid-cols-2">
+                        <div class="grid gap-2 sm:grid-cols-2">
                             @foreach ($ticket->attachments as $attachment)
-                                <a href="{{ route('helpdesk.attachments.download', $attachment->id) }}" target="_blank" class="group flex items-center justify-between gap-4 rounded-xl border border-zinc-200 p-4 text-sm transition hover:bg-zinc-50 dark:border-zinc-700 dark:hover:bg-zinc-800">
+                                <a href="{{ route('helpdesk.attachments.download', $attachment->id) }}" target="_blank" class="group/file flex items-center justify-between gap-3 rounded-lg border border-zinc-200 px-3 py-2 text-xs transition hover:bg-zinc-50 dark:border-zinc-700 dark:hover:bg-zinc-800">
                                     <span class="min-w-0">
-                                        <span class="block truncate font-bold text-zinc-900 dark:text-zinc-100">{{ $attachment->original_name ?? $attachment->original_filename ?? $attachment->filename ?? $attachment->file_name ?? basename($attachment->path ?? $attachment->file_path ?? '') }}</span>
-                                        <span class="block text-xs text-zinc-500">{{ Number::fileSize($attachment->size ?? $attachment->size_bytes ?? 0) }}</span>
+                                        <span class="block truncate font-bold text-zinc-900 dark:text-zinc-100">
+                                            {{ $attachment->original_name ?? $attachment->original_filename ?? $attachment->filename ?? $attachment->file_name ?? basename($attachment->path ?? $attachment->file_path ?? '') }}
+                                        </span>
+                                        <span class="block text-[0.7rem] text-zinc-500">
+                                            {{ Number::fileSize($attachment->size ?? $attachment->size_bytes ?? 0) }}
+                                        </span>
                                     </span>
-                                    <span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-zinc-100 text-zinc-700 transition group-hover:bg-blue-600 group-hover:text-white dark:bg-zinc-800 dark:text-zinc-200">
-                                        <i class="fa-solid fa-download" aria-hidden="true"></i>
+
+                                    <span class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-zinc-100 text-zinc-700 transition group-hover/file:bg-blue-600 group-hover/file:text-white dark:bg-zinc-800 dark:text-zinc-200">
+                                        <i class="fa-solid fa-download text-xs" aria-hidden="true"></i>
                                     </span>
                                 </a>
                             @endforeach
@@ -136,35 +159,38 @@
                 </div>
             </details>
 
-            <section class="space-y-4">
-                <details class="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900" data-helpdesk-conversation-section>
-                    <summary class="flex cursor-pointer list-none items-center justify-between gap-5 bg-gradient-to-r from-slate-950 via-blue-950 to-slate-900 px-7 py-7 text-white marker:hidden sm:px-9">
-                        <div class="flex min-w-0 items-start gap-5">
-                            <span class="inline-flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-blue-500/25 text-white ring-1 ring-white/20 shadow-lg shadow-black/20">
-                                <i class="fa-solid fa-comments text-xl" aria-hidden="true"></i>
+            <section class="space-y-3">
+                <details class="overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900" data-helpdesk-conversation-section>
+                    <summary class="flex cursor-pointer list-none items-center justify-between gap-3 bg-gradient-to-r from-slate-950 via-blue-950 to-slate-900 px-4 py-3 text-white marker:hidden sm:px-5">
+                        <div class="flex min-w-0 items-center gap-3">
+                            <span class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-blue-500/25 text-white ring-1 ring-white/20">
+                                <i class="fa-solid fa-comments text-sm" aria-hidden="true"></i>
                             </span>
-                            <div class="min-w-0 space-y-2">
-                                <p class="text-xs font-black uppercase tracking-[0.22em] text-blue-200">Conversation</p>
-                                <h2 class="text-2xl font-extrabold tracking-tight sm:text-3xl">Document responses</h2>
-                                <p class="text-base font-medium leading-7 text-blue-50/85">Lotus Notes-style document responses and replies.</p>
+
+                            <div class="min-w-0">
+                                <p class="text-[0.65rem] font-black uppercase tracking-[0.18em] text-blue-200">Conversation</p>
+                                <h2 class="truncate text-base font-extrabold tracking-tight">Document responses</h2>
                             </div>
                         </div>
-                        <span class="inline-flex shrink-0 items-center gap-3 rounded-2xl bg-white/15 px-5 py-3 text-base font-extrabold ring-1 ring-white/20 shadow-sm">
+
+                        <span class="inline-flex shrink-0 items-center gap-2 rounded-xl bg-white/15 px-3 py-1.5 text-xs font-extrabold ring-1 ring-white/20">
                             {{ $visibleCommentCount }} item{{ $visibleCommentCount === 1 ? '' : 's' }}
                             <i class="fa-solid fa-chevron-right transition group-open:rotate-90" aria-hidden="true"></i>
                         </span>
                     </summary>
 
-                    <div class="space-y-4 p-5">
-                        <div class="grid gap-3 md:grid-cols-[1fr_auto]">
+                    <div class="space-y-3 p-4">
+                        <div class="grid gap-2 md:grid-cols-[1fr_auto]">
                             <label class="sr-only" for="helpdesk-comment-search">Search comments</label>
-                            <input id="helpdesk-comment-search" type="search" placeholder="Search comments by subject, author, text or technical reference..." class="block w-full rounded-xl border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 shadow-sm focus:border-red-500 focus:ring-red-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100" data-helpdesk-comment-search>
+                            <input id="helpdesk-comment-search" type="search" placeholder="Search comments..." class="block w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-xs text-zinc-900 shadow-sm focus:border-red-500 focus:ring-red-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100" data-helpdesk-comment-search>
+
                             <div class="flex flex-wrap items-center gap-2">
-                                <button type="button" class="inline-flex items-center justify-center rounded-xl bg-red-600 px-4 py-2 text-sm font-bold text-white shadow-sm hover:bg-red-700" data-helpdesk-expand-comments>
+                                <button type="button" class="inline-flex items-center justify-center rounded-lg bg-red-600 px-3 py-2 text-xs font-bold text-white shadow-sm hover:bg-red-700" data-helpdesk-expand-comments>
                                     <i class="fa-solid fa-up-right-and-down-left-from-center mr-2" aria-hidden="true"></i>
                                     Expand all
                                 </button>
-                                <button type="button" class="hidden items-center justify-center rounded-xl bg-blue-600 px-4 py-2 text-sm font-bold text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:bg-blue-500 dark:hover:bg-blue-400 dark:focus:ring-blue-400 dark:focus:ring-offset-zinc-900" data-helpdesk-collapse-comments>
+
+                                <button type="button" class="hidden items-center justify-center rounded-lg bg-blue-600 px-3 py-2 text-xs font-bold text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:bg-blue-500 dark:hover:bg-blue-400 dark:focus:ring-blue-400 dark:focus:ring-offset-zinc-900" data-helpdesk-collapse-comments>
                                     <i class="fa-solid fa-down-left-and-up-right-to-center mr-2" aria-hidden="true"></i>
                                     Collapse all
                                 </button>
@@ -174,132 +200,137 @@
                         @if ($ticket->comments->isNotEmpty())
                             @include('helpdesk::partials.comment-thread', ['comments' => $ticket->comments, 'level' => 0, 'ticket' => $ticket, 'canSeeInternalNotes' => $canSeeInternalNotes])
                         @else
-                            <div class="rounded-2xl border border-dashed border-zinc-300 p-8 text-center text-zinc-500 dark:border-zinc-700">No responses yet.</div>
+                            <div class="rounded-xl border border-dashed border-zinc-300 p-4 text-center text-xs text-zinc-500 dark:border-zinc-700">
+                                No responses yet.
+                            </div>
                         @endif
                     </div>
                 </details>
             </section>
 
-            <form method="POST" action="{{ route('helpdesk.tickets.comments.store', $ticket) }}" enctype="multipart/form-data" class="overflow-hidden rounded-[2rem] border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900" data-helpdesk-comment-form>
+            <form method="POST" action="{{ route('helpdesk.tickets.comments.store', $ticket) }}" enctype="multipart/form-data" class="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900" data-helpdesk-comment-form>
                 @csrf
-                <div class="bg-gradient-to-r from-slate-950 via-blue-950 to-slate-900 px-7 py-8 text-white sm:px-10">
-                    <div class="flex min-w-0 items-start gap-5">
-                        <span class="inline-flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-blue-500/20 text-white ring-1 ring-white/25 shadow-lg shadow-black/20">
-                            <i class="fa-solid fa-square-plus text-xl" aria-hidden="true"></i>
+
+                <div class="bg-gradient-to-r from-slate-950 via-blue-950 to-slate-900 px-5 py-5 text-white sm:px-6">
+                    <div class="flex min-w-0 items-start gap-3">
+                        <span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-blue-500/20 text-white ring-1 ring-white/25 shadow-sm">
+                            <i class="fa-solid fa-square-plus text-base" aria-hidden="true"></i>
                         </span>
-                        <div class="min-w-0 space-y-2">
-                            <p class="text-xs font-black uppercase tracking-[0.22em] text-blue-200">Response document</p>
-                            <h2 class="text-2xl font-extrabold tracking-tight text-white sm:text-3xl">Add reply</h2>
-                            <p class="max-w-4xl text-base font-medium leading-7 text-blue-50/90">Create a response, internal MPBA note or threaded document reply.</p>
+
+                        <div class="min-w-0 space-y-1">
+                            <p class="text-[0.68rem] font-black uppercase tracking-[0.18em] text-blue-200">Response document</p>
+                            <h2 class="text-xl font-extrabold tracking-tight text-white sm:text-2xl">Add reply</h2>
+                            <p class="max-w-4xl text-sm font-medium leading-5 text-blue-50/90">Create a response, internal MPBA note or threaded document reply.</p>
                         </div>
                     </div>
                 </div>
 
-                <div class="space-y-7 p-7 sm:p-10">
-                @if (session('ticket-comment-added'))
-                    <div class="mb-4 rounded-xl border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm font-bold text-emerald-800 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-100">
-                        {{ session('ticket-comment-added') }}
-                    </div>
-                @endif
-                @if ($errors->any())
-                    <div class="mb-4 rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm font-bold text-red-800 dark:border-red-800 dark:bg-red-950 dark:text-red-100">
-                        {{ $errors->first() }}
-                    </div>
-                @endif
-
-                @php
-                    $cannedResponseBodies = $cannedResponses->mapWithKeys(function ($response) use ($ticket, $currentUser) {
-                        $body = (string) $response->body;
-
-                        $body = strtr($body, [
-                            '{{ ticket.reference }}' => e((string) ($ticket->reference ?? '')),
-                            '{{ ticket.subject }}' => e((string) ($ticket->subject ?? '')),
-                            '{{ ticket.status }}' => e((string) ($ticket->status?->name ?? '')),
-                            '{{ ticket.priority }}' => e((string) ($ticket->priority?->name ?? '')),
-                            '{{ ticket.category }}' => e((string) ($ticket->category?->name ?? '')),
-                            '{{ ticket.project }}' => e((string) ($ticket->project?->title ?? '')),
-                            '{{ ticket.team }}' => e((string) ($ticket->team?->name ?? '')),
-                            '{{ requester.name }}' => e((string) ($ticket->owner?->name ?? $ticket->user?->name ?? '')),
-                            '{{ agent.name }}' => e((string) ($ticket->agent?->name ?? $currentUser?->name ?? '')),
-                            '{{ actor.name }}' => e((string) ($currentUser?->name ?? '')),
-                            '{{ ticket.url }}' => e(route('helpdesk.tickets.show', ['ticket' => $ticket->getKey()])),
-                        ]);
-
-                        $body = html_entity_decode($body, ENT_QUOTES | ENT_HTML5, 'UTF-8');
-                        $body = preg_replace('/<\s*(script|style)[^>]*>.*?<\s*\/\s*\1\s*>/is', '', $body) ?: '';
-                        $body = preg_replace('/\s+on[a-z]+\s*=\s*("[^"]*"|\'[^\']*\'|[^\s>]+)/i', '', $body) ?: '';
-                        $body = preg_replace('/javascript\s*:/i', '', $body) ?: '';
-                        $body = strip_tags($body, '<p><br><strong><b><em><i><u><ul><ol><li><blockquote><pre><code><a>');
-
-                        return [(string) $response->id => trim($body)];
-                    })->all();
-                @endphp
-
-                @php
-                    $cannedResponseNames = $cannedResponses->mapWithKeys(fn ($response) => [(string) $response->id => (string) $response->name])->all();
-                @endphp
-                <script type="application/json" id="helpdesk-canned-response-bodies">@json($cannedResponseBodies)</script>
-                <script type="application/json" id="helpdesk-canned-response-names">@json($cannedResponseNames)</script>
-
-                @if ($cannedResponses->isNotEmpty())
-                    <div class="grid gap-4 md:grid-cols-[1fr_auto]">
-                        <div>
-                            <label for="ticket-canned-response" class="mb-3 block text-sm font-bold text-zinc-700 dark:text-zinc-200">Canned response</label>
-                            <select id="ticket-canned-response" name="canned_response_id" class="hd-select block min-h-14 w-full rounded-2xl border border-zinc-300 bg-white px-5 py-4 text-base font-semibold text-zinc-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100" data-canned-response-select>
-                                <option value="">Choose a saved response...</option>
-                                @foreach ($cannedResponses as $response)
-                                    <option value="{{ $response->id }}">{{ $response->name }}</option>
-                                @endforeach
-                            </select>
+                <div class="space-y-5 p-5 sm:p-6">
+                    @if (session('ticket-comment-added'))
+                        <div class="rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs font-bold text-emerald-800 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-100">
+                            {{ session('ticket-comment-added') }}
                         </div>
-                        <div class="flex items-end">
-                            <button type="button" dusk="insert-canned-response" class="inline-flex min-h-14 items-center justify-center rounded-2xl bg-blue-600 px-6 py-4 text-base font-bold text-white shadow-sm transition hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400/70" data-insert-canned-response>
-                                <i class="fa-solid fa-copy mr-2" aria-hidden="true"></i>
-                                Insert response
-                            </button>
-                        </div>
-                    </div>
-                @endif
-
-                @php
-                    $oldCommentBody = html_entity_decode((string) old('commentBody'), ENT_QUOTES | ENT_HTML5, 'UTF-8');
-                    $oldCommentBody = preg_replace('/<\s*(script|style)[^>]*>.*?<\s*\/\s*\1\s*>/is', '', $oldCommentBody) ?: '';
-                    $oldCommentBody = preg_replace('/\s+on[a-z]+\s*=\s*("[^"]*"|\'[^\']*\'|[^\s>]+)/i', '', $oldCommentBody) ?: '';
-                    $oldCommentBody = preg_replace('/javascript\s*:/i', '', $oldCommentBody) ?: '';
-                    $oldCommentBody = strip_tags($oldCommentBody, '<p><br><strong><b><em><i><u><ul><ol><li><blockquote><pre><code><a>');
-                @endphp
-
-                <div>
-                    <label for="ticket-comment-subject" class="mb-2 block text-sm font-bold text-zinc-700 dark:text-zinc-200">Subject</label>
-                    <input id="ticket-comment-subject" name="subject" value="{{ old('subject') }}" placeholder="Response subject" class="block min-h-14 w-full rounded-2xl border border-zinc-300 bg-white px-5 py-4 text-base font-semibold text-zinc-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100" data-helpdesk-comment-subject>
-                </div>
-
-                <div>
-                    <label for="ticket-comment-body-editor" class="mb-3 block text-sm font-bold text-zinc-700 dark:text-zinc-200">Comment</label>
-                    <div class="mb-2 flex flex-wrap gap-2" data-helpdesk-html-toolbar="ticket-comment-body-editor">
-                        <button type="button" data-helpdesk-command="bold" class="rounded-lg border px-2 py-1 text-xs font-black">B</button>
-                        <button type="button" data-helpdesk-command="italic" class="rounded-lg border px-2 py-1 text-xs italic">I</button>
-                        <button type="button" data-helpdesk-command="underline" class="rounded-lg border px-2 py-1 text-xs underline">U</button>
-                        <button type="button" data-helpdesk-command="insertUnorderedList" class="rounded-lg border px-2 py-1 text-xs">List</button>
-                        <button type="button" data-helpdesk-block="blockquote" class="rounded-lg border px-2 py-1 text-xs">Quote</button>
-                        <button type="button" data-helpdesk-block="code" class="rounded-lg border px-2 py-1 text-xs">Code</button>
-                    </div>
-                    <div id="ticket-comment-body-editor" dusk="ticket-comment-editor" contenteditable="true" role="textbox" aria-multiline="true" data-helpdesk-rich-editor data-helpdesk-sync-target="ticket-comment-body" class="block min-h-[20rem] w-full rounded-[1.5rem] border border-zinc-300 bg-white p-6 text-base leading-8 text-zinc-900 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100 prose max-w-none dark:prose-invert">{!! $oldCommentBody !!}</div>
-                    <textarea dusk="comment-body" data-dusk="comment-body" id="ticket-comment-body" name="commentBody" required class="sr-only" tabindex="-1" aria-hidden="true">{{ $oldCommentBody }}</textarea>
-                </div>
-
-                @can('update', $ticket)
-                    @if ($canSeeInternalNotes)
-                        <label class="mt-4 flex items-center gap-2 text-sm font-semibold text-zinc-700 dark:text-zinc-200">
-                            <input type="checkbox" name="internal" value="1" @checked(old('internal')) class="rounded border-zinc-300">
-                            MPBA internal note only
-                        </label>
                     @endif
-                @endcan
 
+                    @if ($errors->any())
+                        <div class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-xs font-bold text-red-800 dark:border-red-800 dark:bg-red-950 dark:text-red-100">
+                            {{ $errors->first() }}
+                        </div>
+                    @endif
 
-                    <div class="mt-6 flex justify-end">
-                        <button dusk="post-comment" data-dusk="post-comment" type="submit" class="inline-flex items-center justify-center rounded-xl bg-emerald-600 px-5 py-3 text-sm font-bold text-white shadow-sm transition hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-400/70">
+                    @php
+                        $cannedResponseBodies = $cannedResponses->mapWithKeys(function ($response) use ($ticket, $currentUser) {
+                            $body = (string) $response->body;
+
+                            $body = strtr($body, [
+                                '{{ ticket.reference }}' => e((string) ($ticket->reference ?? '')),
+                                '{{ ticket.subject }}' => e((string) ($ticket->subject ?? '')),
+                                '{{ ticket.status }}' => e((string) ($ticket->status?->name ?? '')),
+                                '{{ ticket.priority }}' => e((string) ($ticket->priority?->name ?? '')),
+                                '{{ ticket.category }}' => e((string) ($ticket->category?->name ?? '')),
+                                '{{ ticket.project }}' => e((string) ($ticket->project?->title ?? '')),
+                                '{{ ticket.team }}' => e((string) ($ticket->team?->name ?? '')),
+                                '{{ requester.name }}' => e((string) ($ticket->owner?->name ?? $ticket->user?->name ?? '')),
+                                '{{ agent.name }}' => e((string) ($ticket->agent?->name ?? $currentUser?->name ?? '')),
+                                '{{ actor.name }}' => e((string) ($currentUser?->name ?? '')),
+                                '{{ ticket.url }}' => e(route('helpdesk.tickets.show', ['ticket' => $ticket->getKey()])),
+                            ]);
+
+                            $body = html_entity_decode($body, ENT_QUOTES | ENT_HTML5, 'UTF-8');
+                            $body = preg_replace('/<\s*(script|style)[^>]*>.*?<\s*\/\s*\1\s*>/is', '', $body) ?: '';
+                            $body = preg_replace('/\s+on[a-z]+\s*=\s*("[^"]*"|\'[^\']*\'|[^\s>]+)/i', '', $body) ?: '';
+                            $body = preg_replace('/javascript\s*:/i', '', $body) ?: '';
+                            $body = strip_tags($body, '<p><br><strong><b><em><i><u><ul><ol><li><blockquote><pre><code><a>');
+
+                            return [(string) $response->id => trim($body)];
+                        })->all();
+
+                        $cannedResponseNames = $cannedResponses->mapWithKeys(fn ($response) => [(string) $response->id => (string) $response->name])->all();
+
+                        $oldCommentBody = html_entity_decode((string) old('commentBody'), ENT_QUOTES | ENT_HTML5, 'UTF-8');
+                        $oldCommentBody = preg_replace('/<\s*(script|style)[^>]*>.*?<\s*\/\s*\1\s*>/is', '', $oldCommentBody) ?: '';
+                        $oldCommentBody = preg_replace('/\s+on[a-z]+\s*=\s*("[^"]*"|\'[^\']*\'|[^\s>]+)/i', '', $oldCommentBody) ?: '';
+                        $oldCommentBody = preg_replace('/javascript\s*:/i', '', $oldCommentBody) ?: '';
+                        $oldCommentBody = strip_tags($oldCommentBody, '<p><br><strong><b><em><i><u><ul><ol><li><blockquote><pre><code><a>');
+                    @endphp
+
+                    <script type="application/json" id="helpdesk-canned-response-bodies">@json($cannedResponseBodies)</script>
+                    <script type="application/json" id="helpdesk-canned-response-names">@json($cannedResponseNames)</script>
+
+                    @if ($cannedResponses->isNotEmpty())
+                        <div class="grid gap-3 md:grid-cols-[1fr_auto]">
+                            <div>
+                                <label for="ticket-canned-response" class="mb-2 block text-xs font-bold text-zinc-700 dark:text-zinc-200">Canned response</label>
+                                <select id="ticket-canned-response" name="canned_response_id" class="hd-select block min-h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm font-semibold text-zinc-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100" data-canned-response-select>
+                                    <option value="">Choose a saved response...</option>
+                                    @foreach ($cannedResponses as $response)
+                                        <option value="{{ $response->id }}">{{ $response->name }}</option>
+                                    @endforeach
+                                </select>
+                            </div>
+
+                            <div class="flex items-end">
+                                <button type="button" dusk="insert-canned-response" class="inline-flex min-h-10 items-center justify-center rounded-lg bg-blue-600 px-4 py-2 text-xs font-bold text-white shadow-sm transition hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400/70" data-insert-canned-response>
+                                    <i class="fa-solid fa-copy mr-2" aria-hidden="true"></i>
+                                    Insert response
+                                </button>
+                            </div>
+                        </div>
+                    @endif
+
+                    <div>
+                        <label for="ticket-comment-subject" class="mb-2 block text-xs font-bold text-zinc-700 dark:text-zinc-200">Subject</label>
+                        <input id="ticket-comment-subject" name="subject" value="{{ old('subject') }}" placeholder="Response subject" class="block min-h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm font-semibold text-zinc-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100" data-helpdesk-comment-subject>
+                    </div>
+
+                    <div>
+                        <label for="ticket-comment-body-editor" class="mb-2 block text-xs font-bold text-zinc-700 dark:text-zinc-200">Comment</label>
+
+                        <div class="mb-2 flex flex-wrap gap-2" data-helpdesk-html-toolbar="ticket-comment-body-editor">
+                            <button type="button" data-helpdesk-command="bold" class="rounded-lg border px-2 py-1 text-xs font-black">B</button>
+                            <button type="button" data-helpdesk-command="italic" class="rounded-lg border px-2 py-1 text-xs italic">I</button>
+                            <button type="button" data-helpdesk-command="underline" class="rounded-lg border px-2 py-1 text-xs underline">U</button>
+                            <button type="button" data-helpdesk-command="insertUnorderedList" class="rounded-lg border px-2 py-1 text-xs">List</button>
+                            <button type="button" data-helpdesk-block="blockquote" class="rounded-lg border px-2 py-1 text-xs">Quote</button>
+                            <button type="button" data-helpdesk-block="code" class="rounded-lg border px-2 py-1 text-xs">Code</button>
+                        </div>
+
+                        <div id="ticket-comment-body-editor" dusk="ticket-comment-editor" contenteditable="true" role="textbox" aria-multiline="true" data-helpdesk-rich-editor data-helpdesk-sync-target="ticket-comment-body" class="prose block min-h-[12rem] w-full max-w-none rounded-xl border border-zinc-300 bg-white p-4 text-sm leading-6 text-zinc-900 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100 dark:prose-invert">{!! $oldCommentBody !!}</div>
+
+                        <textarea dusk="comment-body" data-dusk="comment-body" id="ticket-comment-body" name="commentBody" required class="sr-only" tabindex="-1" aria-hidden="true">{{ $oldCommentBody }}</textarea>
+                    </div>
+
+                    @can('update', $ticket)
+                        @if ($canSeeInternalNotes)
+                            <label class="mt-3 flex items-center gap-2 text-xs font-semibold text-zinc-700 dark:text-zinc-200">
+                                <input type="checkbox" name="internal" value="1" @checked(old('internal')) class="rounded border-zinc-300">
+                                MPBA internal note only
+                            </label>
+                        @endif
+                    @endcan
+
+                    <div class="flex justify-end">
+                        <button dusk="post-comment" data-dusk="post-comment" type="submit" class="inline-flex items-center justify-center rounded-lg bg-emerald-600 px-4 py-2 text-xs font-bold text-white shadow-sm transition hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-400/70">
                             <i class="fa-solid fa-comments mr-2" aria-hidden="true"></i>
                             Post reply
                         </button>
@@ -420,6 +451,7 @@
                         document.querySelectorAll('[data-helpdesk-comment-card]').forEach((card) => {
                             const match = term === '' || (card.dataset.helpdeskCommentText || '').includes(term);
                             card.classList.toggle('hidden', ! match);
+
                             if (match) {
                                 card.open = true;
                             }
@@ -605,63 +637,109 @@
             </script>
         </div>
 
-        <aside class="space-y-6">
-            <div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
-                <div class="mb-5 border-b border-blue-200 pb-3 dark:border-blue-900/70">
-                    <h2 class="flex items-center gap-3 text-base font-extrabold text-zinc-900 dark:text-white">
-                        <span class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-blue-600 text-white shadow-sm"><i class="fa-solid fa-file-lines" aria-hidden="true"></i></span>
+        <aside class="space-y-4">
+            <div class="rounded-xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
+                <div class="mb-3 border-b border-blue-200 pb-2 dark:border-blue-900/70">
+                    <h2 class="flex items-center gap-2 text-sm font-extrabold text-zinc-900 dark:text-white">
+                        <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-blue-600 text-white shadow-sm">
+                            <i class="fa-solid fa-file-lines text-xs" aria-hidden="true"></i>
+                        </span>
                         Ticket details
                     </h2>
                 </div>
-                <dl class="space-y-3 text-sm">
-                    <div class="flex justify-between gap-4"><dt class="text-zinc-500">Category</dt><dd>{{ $ticket->category?->name ?? 'None' }}</dd></div>
-                    <div class="flex justify-between gap-4"><dt class="text-zinc-500">Project</dt><dd>{{ $ticket->project?->title ?? 'None' }}</dd></div>
-                    <div class="flex justify-between gap-4"><dt class="text-zinc-500">Product/service</dt><dd>{{ $ticket->product?->name ?? 'None' }}</dd></div>
-                    <div class="flex justify-between gap-4"><dt class="text-zinc-500">Team</dt><dd>{{ $ticket->team?->name ?? 'None' }}</dd></div>
-                    <div class="flex justify-between gap-4"><dt class="text-zinc-500">Created</dt><dd>{{ $ticket->created_at->format('d M Y H:i') }}</dd></div>
-                    <div class="flex justify-between gap-4"><dt class="text-zinc-500">Due</dt><dd>{{ $ticket->due_at?->format('d M Y') ?? 'No due date' }}</dd></div>
+
+                <dl class="space-y-2 text-xs">
+                    <div class="flex justify-between gap-3">
+                        <dt class="text-zinc-500">Category</dt>
+                        <dd>{{ $ticket->category?->name ?? 'None' }}</dd>
+                    </div>
+                    <div class="flex justify-between gap-3">
+                        <dt class="text-zinc-500">Project</dt>
+                        <dd>{{ $ticket->project?->title ?? 'None' }}</dd>
+                    </div>
+                    <div class="flex justify-between gap-3">
+                        <dt class="text-zinc-500">Product/service</dt>
+                        <dd>{{ $ticket->product?->name ?? 'None' }}</dd>
+                    </div>
+                    <div class="flex justify-between gap-3">
+                        <dt class="text-zinc-500">Team</dt>
+                        <dd>{{ $ticket->team?->name ?? 'None' }}</dd>
+                    </div>
+                    <div class="flex justify-between gap-3">
+                        <dt class="text-zinc-500">Created</dt>
+                        <dd>{{ $ticket->created_at->format('d M Y H:i') }}</dd>
+                    </div>
+                    <div class="flex justify-between gap-3">
+                        <dt class="text-zinc-500">Due</dt>
+                        <dd>{{ $ticket->due_at?->format('d M Y') ?? 'No due date' }}</dd>
+                    </div>
                 </dl>
             </div>
 
-            <div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
-                <div class="mb-5 border-b border-red-200 pb-3 dark:border-red-900/70">
-                    <h2 class="flex items-center gap-3 text-base font-extrabold text-zinc-900 dark:text-white">
-                        <span class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-red-600 text-white shadow-sm"><i class="fa-solid fa-clock" aria-hidden="true"></i></span>
+            <div class="rounded-xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
+                <div class="mb-3 border-b border-red-200 pb-2 dark:border-red-900/70">
+                    <h2 class="flex items-center gap-2 text-sm font-extrabold text-zinc-900 dark:text-white">
+                        <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-red-600 text-white shadow-sm">
+                            <i class="fa-solid fa-clock text-xs" aria-hidden="true"></i>
+                        </span>
                         SLA metrics
                     </h2>
                 </div>
-                <div class="grid gap-3 text-sm">
-                    <div class="rounded-xl border {{ $ticket->sla_first_response_breached ? 'border-red-300 bg-red-50 text-red-900 dark:border-red-900 dark:bg-red-950 dark:text-red-100' : 'border-emerald-200 bg-emerald-50 text-emerald-900 dark:border-emerald-900 dark:bg-emerald-950 dark:text-emerald-100' }} p-3">
-                        <div class="text-xs font-semibold uppercase tracking-wide">First response</div>
+
+                <div class="grid gap-2 text-xs">
+                    <div class="rounded-lg border {{ $ticket->sla_first_response_breached ? 'border-red-300 bg-red-50 text-red-900 dark:border-red-900 dark:bg-red-950 dark:text-red-100' : 'border-emerald-200 bg-emerald-50 text-emerald-900 dark:border-emerald-900 dark:bg-emerald-950 dark:text-emerald-100' }} p-3">
+                        <div class="text-[0.68rem] font-semibold uppercase tracking-wide">First response</div>
                         <div class="mt-1">{{ $ticket->first_response_at?->format('d M Y H:i') ?? 'Awaiting response' }}</div>
-                        <div class="mt-1 text-xs opacity-75">Due {{ $ticket->sla_first_response_due_at?->format('d M Y H:i') ?? 'Not set' }}</div>
+                        <div class="mt-1 text-[0.68rem] opacity-75">Due {{ $ticket->sla_first_response_due_at?->format('d M Y H:i') ?? 'Not set' }}</div>
                     </div>
-                    <div class="rounded-xl border {{ $ticket->sla_resolution_breached ? 'border-red-300 bg-red-50 text-red-900 dark:border-red-900 dark:bg-red-950 dark:text-red-100' : 'border-blue-200 bg-blue-50 text-blue-900 dark:border-blue-900 dark:bg-blue-950 dark:text-blue-100' }} p-3">
-                        <div class="text-xs font-semibold uppercase tracking-wide">Resolution</div>
+
+                    <div class="rounded-lg border {{ $ticket->sla_resolution_breached ? 'border-red-300 bg-red-50 text-red-900 dark:border-red-900 dark:bg-red-950 dark:text-red-100' : 'border-blue-200 bg-blue-50 text-blue-900 dark:border-blue-900 dark:bg-blue-950 dark:text-blue-100' }} p-3">
+                        <div class="text-[0.68rem] font-semibold uppercase tracking-wide">Resolution</div>
                         <div class="mt-1">{{ $ticket->completed_at?->format('d M Y H:i') ?? 'Open' }}</div>
-                        <div class="mt-1 text-xs opacity-75">Due {{ $ticket->sla_resolution_due_at?->format('d M Y H:i') ?? 'Not set' }}</div>
+                        <div class="mt-1 text-[0.68rem] opacity-75">Due {{ $ticket->sla_resolution_due_at?->format('d M Y H:i') ?? 'Not set' }}</div>
                     </div>
+
                     <div class="grid grid-cols-2 gap-2 text-center">
-                        <div class="rounded-xl border border-zinc-200 p-3 dark:border-zinc-700"><div class="text-xl font-semibold">{{ $ticket->public_replies_count }}</div><div class="text-xs text-zinc-500">Public replies</div></div>
-                        <div class="rounded-xl border border-zinc-200 p-3 dark:border-zinc-700"><div class="text-xl font-semibold">{{ $ticket->time_spent_minutes }}</div><div class="text-xs text-zinc-500">Minutes logged</div></div>
+                        <div class="rounded-lg border border-zinc-200 p-2 dark:border-zinc-700">
+                            <div class="text-lg font-semibold">{{ $ticket->public_replies_count }}</div>
+                            <div class="text-[0.68rem] text-zinc-500">Public replies</div>
+                        </div>
+
+                        <div class="rounded-lg border border-zinc-200 p-2 dark:border-zinc-700">
+                            <div class="text-lg font-semibold">{{ $ticket->time_spent_minutes }}</div>
+                            <div class="text-[0.68rem] text-zinc-500">Minutes logged</div>
+                        </div>
                     </div>
                 </div>
             </div>
 
-            <div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
-                <div class="mb-5 border-b border-emerald-200 pb-3 dark:border-emerald-900/70">
-                    <h2 class="flex items-center gap-3 text-base font-extrabold text-zinc-900 dark:text-white">
-                        <span class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-emerald-600 text-white shadow-sm"><i class="fa-solid fa-user" aria-hidden="true"></i></span>
+            <div class="rounded-xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
+                <div class="mb-3 border-b border-emerald-200 pb-2 dark:border-emerald-900/70">
+                    <h2 class="flex items-center gap-2 text-sm font-extrabold text-zinc-900 dark:text-white">
+                        <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-600 text-white shadow-sm">
+                            <i class="fa-solid fa-user text-xs" aria-hidden="true"></i>
+                        </span>
                         Requester profile
                     </h2>
                 </div>
-                <dl class="space-y-3 text-sm">
-                    <div class="flex justify-between gap-4"><dt class="text-zinc-500">Name</dt><dd>{{ $ticket->owner?->name ?? 'Unknown' }}</dd></div>
-                    <div class="flex justify-between gap-4"><dt class="text-zinc-500">Email</dt><dd class="truncate">{{ $ticket->owner?->email ?? 'None' }}</dd></div>
-                    <div class="flex justify-between gap-4"><dt class="text-zinc-500">Company</dt><dd>{{ $ticket->owner?->company?->name ?? 'Current company' }}</dd></div>
+
+                <dl class="space-y-2 text-xs">
+                    <div class="flex justify-between gap-3">
+                        <dt class="text-zinc-500">Name</dt>
+                        <dd>{{ $ticket->owner?->name ?? 'Unknown' }}</dd>
+                    </div>
+                    <div class="flex justify-between gap-3">
+                        <dt class="text-zinc-500">Email</dt>
+                        <dd class="truncate">{{ $ticket->owner?->email ?? 'None' }}</dd>
+                    </div>
+                    <div class="flex justify-between gap-3">
+                        <dt class="text-zinc-500">Company</dt>
+                        <dd>{{ $ticket->owner?->company?->name ?? 'Current company' }}</dd>
+                    </div>
                 </dl>
+
                 @if ($ticket->tags->isNotEmpty())
-                    <div class="mt-4 flex flex-wrap gap-2">
+                    <div class="mt-3 flex flex-wrap gap-2">
                         @foreach ($ticket->tags as $tag)
                             <span class="rounded-full px-2 py-1 text-xs font-semibold text-white" style="background-color: {{ \Modules\Helpdesk\Support\Color::css($tag->color) }}">{{ $tag->name }}</span>
                         @endforeach
@@ -670,15 +748,17 @@
             </div>
 
             @if ($ticket->checklistItems->isNotEmpty())
-                <div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
+                <div class="rounded-xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
                     @php($completedChecks = $ticket->checklistItems->where('is_completed', true)->count())
-                    <div class="mb-4 flex items-center justify-between gap-3">
-                        <h2 class="text-base font-semibold text-zinc-900 dark:text-white">Checklist</h2>
+
+                    <div class="mb-3 flex items-center justify-between gap-3">
+                        <h2 class="text-sm font-semibold text-zinc-900 dark:text-white">Checklist</h2>
                         <flux:badge color="blue">{{ $completedChecks }}/{{ $ticket->checklistItems->count() }}</flux:badge>
                     </div>
+
                     <div class="space-y-2">
                         @foreach ($ticket->checklistItems as $item)
-                            <label class="flex items-start gap-3 rounded-xl border border-zinc-200 p-3 text-sm dark:border-zinc-700">
+                            <label class="flex items-start gap-2 rounded-lg border border-zinc-200 p-2 text-xs dark:border-zinc-700">
                                 <input type="checkbox" wire:click="toggleChecklistItem({{ $item->id }})" @checked($item->is_completed) class="mt-1 rounded border-zinc-300">
                                 <span class="{{ $item->is_completed ? 'text-zinc-500 line-through' : 'text-zinc-800 dark:text-zinc-100' }}">{{ $item->title }}</span>
                             </label>
@@ -687,38 +767,41 @@
                 </div>
             @endif
 
-            <div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
-                <h2 class="mb-4 text-base font-semibold text-zinc-900 dark:text-white">Git commits</h2>
+            <div class="rounded-xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
+                <h2 class="mb-3 text-sm font-semibold text-zinc-900 dark:text-white">Git commits</h2>
+
                 <div class="space-y-2">
                     @forelse ($ticket->gitCommits as $commit)
-                        <a href="{{ $commit->url ?: '#' }}" target="_blank" class="block rounded-xl border border-zinc-100 p-3 dark:border-zinc-800">
-                            <div class="font-mono text-xs text-zinc-500">{{ $commit->short_hash }} · {{ $commit->repository?->name }}</div>
-                            <div class="mt-1 text-sm font-medium text-zinc-900 dark:text-zinc-100">{{ $commit->message }}</div>
+                        <a href="{{ $commit->url ?: '#' }}" target="_blank" class="block rounded-lg border border-zinc-100 p-2 dark:border-zinc-800">
+                            <div class="font-mono text-[0.68rem] text-zinc-500">{{ $commit->short_hash }} · {{ $commit->repository?->name }}</div>
+                            <div class="mt-1 text-xs font-medium text-zinc-900 dark:text-zinc-100">{{ $commit->message }}</div>
                         </a>
                     @empty
-                        <div class="rounded-xl border border-dashed border-zinc-300 p-4 text-center text-sm text-zinc-500 dark:border-zinc-700">No commits linked.</div>
+                        <div class="rounded-lg border border-dashed border-zinc-300 p-3 text-center text-xs text-zinc-500 dark:border-zinc-700">
+                            No commits linked.
+                        </div>
                     @endforelse
                 </div>
             </div>
 
             @can('update', $ticket)
-                <div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
-                    <div class="mb-5 rounded-2xl bg-gradient-to-r from-blue-700 via-indigo-700 to-violet-700 px-4 py-4 text-white shadow-sm">
-                        <p class="text-xs font-black uppercase tracking-[0.24em] text-blue-100">Ticket controls</p>
-                        <h2 class="mt-1 text-lg font-black tracking-tight">Assignment, status and priority</h2>
-                        <p class="mt-1 text-sm font-semibold text-blue-100/90">Use the explicit update buttons below to save each change.</p>
+                <div class="rounded-xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
+                    <div class="mb-4 rounded-xl bg-gradient-to-r from-blue-700 via-indigo-700 to-violet-700 px-3 py-3 text-white shadow-sm">
+                        <p class="text-[0.68rem] font-black uppercase tracking-[0.18em] text-blue-100">Ticket controls</p>
+                        <h2 class="mt-1 text-base font-black tracking-tight">Assignment, status and priority</h2>
                     </div>
 
                     @if (session('ticket-action-updated'))
-                        <div class="mb-5 rounded-xl border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm font-bold text-emerald-800 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-100">
+                        <div class="mb-4 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs font-bold text-emerald-800 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-100">
                             {{ session('ticket-action-updated') }}
                         </div>
                     @endif
 
-                    <form method="POST" action="{{ route('helpdesk.tickets.agent.update', $ticket) }}" class="mb-5 space-y-3">
+                    <form method="POST" action="{{ route('helpdesk.tickets.agent.update', $ticket) }}" class="mb-4 space-y-2">
                         @csrf
-                        <label class="block text-sm font-bold text-zinc-700 dark:text-zinc-200" for="show_agent_id">Assigned agent</label>
-                        <select id="show_agent_id" name="agent_id" class="hd-select block w-full rounded-xl border border-zinc-300 bg-white p-2.5 text-sm font-semibold text-zinc-900 shadow-sm focus:border-emerald-500 focus:ring-emerald-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100" data-dusk="ticket-show-agent">
+
+                        <label class="block text-xs font-bold text-zinc-700 dark:text-zinc-200" for="show_agent_id">Assigned agent</label>
+                        <select id="show_agent_id" name="agent_id" class="hd-select block w-full rounded-lg border border-zinc-300 bg-white p-2 text-xs font-semibold text-zinc-900 shadow-sm focus:border-emerald-500 focus:ring-emerald-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100" data-dusk="ticket-show-agent">
                             <option value="" @selected($agent_id === null)>Unassigned</option>
                             @forelse ($agents as $agent)
                                 <option value="{{ $agent->id }}" @selected((int) $agent_id === (int) $agent->id)>{{ $agent->name }} · {{ $agent->email }}</option>
@@ -726,37 +809,51 @@
                                 <option value="" disabled>No users available for assignment</option>
                             @endforelse
                         </select>
-                        @error('agent_id') <p class="text-sm font-bold text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
+
+                        @error('agent_id')
+                        <p class="text-xs font-bold text-red-600 dark:text-red-400">{{ $message }}</p>
+                        @enderror
+
                         <button type="submit" dusk="update-agent" data-dusk="update-agent" class="inline-flex items-center justify-center rounded-lg bg-emerald-600 px-3 py-2 text-xs font-black text-white shadow-sm transition hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-400/70">
                             <i class="fa-solid fa-user-check mr-2" aria-hidden="true"></i>
                             <span>Assign agent</span>
                         </button>
                     </form>
 
-                    <form method="POST" action="{{ route('helpdesk.tickets.status.update', $ticket) }}" class="mb-5 space-y-3">
+                    <form method="POST" action="{{ route('helpdesk.tickets.status.update', $ticket) }}" class="mb-4 space-y-2">
                         @csrf
-                        <label class="block text-sm font-bold text-zinc-700 dark:text-zinc-200" for="show_status_id">Status</label>
-                        <select id="show_status_id" name="status_id" class="hd-select block min-h-14 w-full rounded-2xl border border-zinc-300 bg-white px-5 py-4 text-base font-semibold text-zinc-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100" data-dusk="ticket-show-status">
+
+                        <label class="block text-xs font-bold text-zinc-700 dark:text-zinc-200" for="show_status_id">Status</label>
+                        <select id="show_status_id" name="status_id" class="hd-select block min-h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-xs font-semibold text-zinc-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100" data-dusk="ticket-show-status">
                             @foreach ($statuses as $status)
                                 <option value="{{ $status->id }}" @selected((int) $status_id === (int) $status->id)>{{ $status->name }}</option>
                             @endforeach
                         </select>
-                        @error('status_id') <p class="text-sm font-bold text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
+
+                        @error('status_id')
+                        <p class="text-xs font-bold text-red-600 dark:text-red-400">{{ $message }}</p>
+                        @enderror
+
                         <button type="submit" dusk="update-status" class="inline-flex items-center justify-center rounded-lg bg-blue-600 px-3 py-2 text-xs font-black text-white shadow-sm transition hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400/70">
                             <i class="fa-solid fa-circle-check mr-2" aria-hidden="true"></i>
                             <span>Update status</span>
                         </button>
                     </form>
 
-                    <form method="POST" action="{{ route('helpdesk.tickets.priority.update', $ticket) }}" class="space-y-3">
+                    <form method="POST" action="{{ route('helpdesk.tickets.priority.update', $ticket) }}" class="space-y-2">
                         @csrf
-                        <label class="block text-sm font-bold text-zinc-700 dark:text-zinc-200" for="show_priority_id">Priority</label>
-                        <select id="show_priority_id" name="priority_id" class="hd-select block w-full rounded-xl border border-zinc-300 bg-white p-2.5 text-sm font-semibold text-zinc-900 shadow-sm focus:border-amber-500 focus:ring-amber-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100" data-dusk="ticket-show-priority">
+
+                        <label class="block text-xs font-bold text-zinc-700 dark:text-zinc-200" for="show_priority_id">Priority</label>
+                        <select id="show_priority_id" name="priority_id" class="hd-select block w-full rounded-lg border border-zinc-300 bg-white p-2 text-xs font-semibold text-zinc-900 shadow-sm focus:border-amber-500 focus:ring-amber-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100" data-dusk="ticket-show-priority">
                             @foreach ($priorities as $priority)
                                 <option value="{{ $priority->id }}" @selected((int) $priority_id === (int) $priority->id)>{{ $priority->name }}</option>
                             @endforeach
                         </select>
-                        @error('priority_id') <p class="text-sm font-bold text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
+
+                        @error('priority_id')
+                        <p class="text-xs font-bold text-red-600 dark:text-red-400">{{ $message }}</p>
+                        @enderror
+
                         <button type="submit" dusk="update-priority" class="inline-flex items-center justify-center rounded-lg bg-amber-500 px-3 py-2 text-xs font-black text-white shadow-sm transition hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-300/70">
                             <i class="fa-solid fa-flag mr-2" aria-hidden="true"></i>
                             <span>Update priority</span>