From b1d9b235e289881284e634d23f7ee04694a09953 Mon Sep 17 00:00:00 2001
From: Mark Gregory <mark.gregory@mpba.co.uk>
Date: Wed, 17 Jun 2026 11:32:58 +0100
Subject: [PATCH] ui updates

---
 .../views/livewire/ticket-show.blade.php      | 98 +++++++++++--------
 Modules/Helpdesk/changelog.yaml               | 22 +++++
 Modules/Helpdesk/module.json                  |  2 +-
 3 files changed, 80 insertions(+), 42 deletions(-)

diff --git a/Modules/Helpdesk/Resources/views/livewire/ticket-show.blade.php b/Modules/Helpdesk/Resources/views/livewire/ticket-show.blade.php
index 1d3c1810..49cdbab5 100644
--- a/Modules/Helpdesk/Resources/views/livewire/ticket-show.blade.php
+++ b/Modules/Helpdesk/Resources/views/livewire/ticket-show.blade.php
@@ -39,30 +39,32 @@
 
     <div class="grid gap-6 lg:grid-cols-3">
         <div class="space-y-6 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-6 py-5 text-white">
-                    <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-                        <div>
-                            <p class="text-xs font-black uppercase tracking-[0.24em] text-blue-100">Ticket document</p>
-                            <h2 class="mt-1 flex items-center gap-2 text-lg font-extrabold tracking-tight">
-                                <span class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-white/15 ring-1 ring-white/25">
-                                    <i class="fa-solid fa-file-lines" aria-hidden="true"></i>
-                                </span>
-                                Request details
-                            </h2>
-                            <p class="mt-1 text-sm font-medium text-blue-100/90">Original request content recorded against this helpdesk ticket.</p>
+            <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>
+                            </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>
                         </div>
 
-                        <span class="inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-xs font-extrabold text-blue-50 ring-1 ring-white/20">
+                        <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">
                             <i class="fa-solid fa-hashtag" aria-hidden="true"></i>
                             {{ $ticket->reference }}
                         </span>
                     </div>
                 </div>
 
-                <div class="p-6">
-                    <div class="prose max-w-none rounded-2xl border border-zinc-200 bg-zinc-50 p-6 text-zinc-900 shadow-inner dark:prose-invert dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100 sm:min-h-40">
-                        {!! $ticket->body !!}
+                <div class="p-7 sm:p-10">
+                    <div class="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">
+                            {!! $ticket->body !!}
+                        </div>
                     </div>
                 </div>
             </article>
@@ -102,18 +104,18 @@
 
             <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-4 bg-gradient-to-r from-slate-950 via-blue-950 to-slate-900 px-5 py-5 text-white marker:hidden">
-                        <div class="flex min-w-0 items-center gap-4">
-                            <span class="inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-blue-500/25 text-white ring-1 ring-white/20">
-                                <i class="fa-solid fa-comments text-lg" aria-hidden="true"></i>
+                    <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>
                             </span>
-                            <div class="min-w-0">
+                            <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="mt-1 text-xl font-extrabold tracking-tight">Document responses</h2>
-                                <p class="mt-1 text-sm font-medium text-blue-50/85">Lotus Notes-style document responses and replies.</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>
                         </div>
-                        <span class="inline-flex items-center gap-3 rounded-full bg-white/15 px-4 py-2 text-sm font-extrabold ring-1 ring-white/20">
+                        <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">
                             {{ $visibleCommentCount }} item{{ $visibleCommentCount === 1 ? '' : 's' }}
                             <i class="fa-solid fa-chevron-right transition group-open:rotate-90" aria-hidden="true"></i>
                         </span>
@@ -144,9 +146,22 @@
                 </details>
             </section>
 
-            <form method="POST" action="{{ route('helpdesk.tickets.comments.store', $ticket) }}" enctype="multipart/form-data" class="rounded-2xl border border-zinc-200 bg-white p-6 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-[2rem] border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900" data-helpdesk-comment-form>
                 @csrf
-                <h2 class="mb-4 text-base font-semibold text-zinc-900 dark:text-white">Add reply</h2>
+                <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>
+                        </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>
+                    </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') }}
@@ -193,10 +208,10 @@
                 <script type="application/json" id="helpdesk-canned-response-names">@json($cannedResponseNames)</script>
 
                 @if ($cannedResponses->isNotEmpty())
-                    <div class="mb-4 grid gap-3 md:grid-cols-[1fr_auto]">
+                    <div class="grid gap-4 md:grid-cols-[1fr_auto]">
                         <div>
-                            <label for="ticket-canned-response" class="mb-2 block text-sm font-medium text-zinc-700 dark:text-zinc-200">Canned response</label>
-                            <select id="ticket-canned-response" name="canned_response_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-blue-500 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100" data-canned-response-select>
+                            <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>
@@ -204,7 +219,7 @@
                             </select>
                         </div>
                         <div class="flex items-end">
-                            <button type="button" dusk="insert-canned-response" class="inline-flex items-center justify-center rounded-xl bg-blue-600 px-4 py-2 text-sm 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>
+                            <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>
@@ -220,13 +235,13 @@
                     $oldCommentBody = strip_tags($oldCommentBody, '<p><br><strong><b><em><i><u><ul><ol><li><blockquote><pre><code><a>');
                 @endphp
 
-                <div class="mb-4">
+                <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 w-full rounded-xl border border-zinc-300 bg-white p-3 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>
+                    <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-2 block text-sm font-medium text-zinc-700 dark:text-zinc-200">Comment</label>
+                    <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>
@@ -235,7 +250,7 @@
                         <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="min-h-40 block w-full rounded-xl border border-zinc-300 bg-white p-3 text-sm 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 prose-sm max-w-none dark:prose-invert">{!! $oldCommentBody !!}</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 id="ticket-comment-body" name="commentBody" required class="sr-only" tabindex="-1" aria-hidden="true">{{ $oldCommentBody }}</textarea>
                 </div>
 
@@ -248,7 +263,7 @@
                     @endif
                 @endcan
 
-                <div class="mt-4 rounded-xl border border-dashed border-blue-300 p-3 dark:border-blue-800">
+                <div class="mt-5 rounded-2xl border border-dashed border-blue-300 p-5 dark:border-blue-800">
                     <label class="inline-flex cursor-pointer items-center gap-2 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-thumbtack" aria-hidden="true"></i>
                         Pin attachments
@@ -258,11 +273,12 @@
                     @error('attachments.*') <div class="mt-2 text-sm text-red-600">{{ $message }}</div> @enderror
                 </div>
 
-                <div class="mt-5 flex justify-end">
-                    <button dusk="post-comment" type="submit" class="inline-flex items-center justify-center rounded-xl bg-emerald-600 px-4 py-2 text-sm 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>
+                    <div class="mt-6 flex justify-end">
+                        <button 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">
+                            <i class="fa-solid fa-comments mr-2" aria-hidden="true"></i>
+                            Post reply
+                        </button>
+                    </div>
                 </div>
             </form>
 
@@ -690,7 +706,7 @@
                     <form method="POST" action="{{ route('helpdesk.tickets.status.update', $ticket) }}" class="mb-5 space-y-3">
                         @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 w-full rounded-xl border border-zinc-300 bg-white p-2.5 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-dusk="ticket-show-status">
+                        <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">
                             @foreach ($statuses as $status)
                                 <option value="{{ $status->id }}" @selected((int) $status_id === (int) $status->id)>{{ $status->name }}</option>
                             @endforeach
diff --git a/Modules/Helpdesk/changelog.yaml b/Modules/Helpdesk/changelog.yaml
index c3786927..f43c7698 100644
--- a/Modules/Helpdesk/changelog.yaml
+++ b/Modules/Helpdesk/changelog.yaml
@@ -236,3 +236,25 @@ versions:
     - "Comment subjects are stored for public responses, canned responses, and nested replies while GUID/UNID remain searchable."
     - "Ticket details, SLA metrics, requester profile, ticket document, attachments, and conversation headers received consistent professional styling."
     - "Browser and feature tests were updated for collapsed conversations, comment subjects, and hidden replication identifiers."
+
+- version: 1.7.1
+  date: 2026-06-17
+  type: changed
+  summary: "Unsquashed Helpdesk ticket document and reply composer with professional document headers."
+  changes:
+    - "Expanded the request document body area with larger padding, stronger document typography, and a minimum document height so ticket text no longer appears compressed."
+    - "Added a professional response-document header to the Add reply composer while preserving canned responses, rich-text controls, internal-note visibility, attachments, and POST comment storage."
+    - "Increased the reply subject, rich-text editor, attachment pin area, and submit button spacing for a more professional Lotus Notes-style document workflow."
+    - "Kept module.json version in sync with changelog.yaml."
+
+
+- version: 1.7.2
+  date: 2026-06-17
+  type: changed
+  summary: "Refined Helpdesk ticket document and reply composer spacing so headers and editor areas no longer look compressed."
+  changes:
+    - "Reworked the request document header with balanced icon sizing, spacing, and a professional ticket reference badge."
+    - "Expanded the ticket body document area with larger vertical space and document-style padding instead of a compressed input-like box."
+    - "Reworked the conversation header with consistent professional spacing while keeping the conversation fully collapsed by default."
+    - "Reworked the Add reply response-document header and expanded the composer controls and rich text editor height for a less squashed professional layout."
+    - "Kept module.json version in sync with changelog.yaml."
diff --git a/Modules/Helpdesk/module.json b/Modules/Helpdesk/module.json
index d559d406..1ae95f13 100644
--- a/Modules/Helpdesk/module.json
+++ b/Modules/Helpdesk/module.json
@@ -22,5 +22,5 @@
         "Modules\\Helpdesk\\Providers\\HelpdeskServiceProvider"
     ],
     "files": [],
-    "version": "1.7.0"
+    "version": "1.7.2"
 }