test fix for the ticket title

assets/css/ticket.css

@@ -287,7 +287,7 @@
 }
 
 /* Blinking cursor effect for active inputs */
-.title-input:not(:disabled)::after,
+.title-input[contenteditable="true"]::after,
 textarea[data-field="description"]:not(:disabled)::after {
     content: '█';
     color: var(--terminal-green);
@@ -367,31 +367,31 @@ textarea[data-field="description"]:not(:disabled)::after {
     margin: 0;
     word-break: break-word;
     overflow-wrap: break-word;
-    white-space: pre-wrap;
+    word-wrap: break-word;
+    white-space: normal;
     display: block;
     background: transparent;
     color: var(--terminal-green);
     line-height: 1.4;
-    min-height: fit-content;
-    height: auto;
-    resize: none;
-    overflow-y: hidden;
-    overflow-x: hidden;
+    min-height: 1.4em;
+    outline: none;
 }
 
-.title-input:not(:disabled) {
+.title-input[contenteditable="true"] {
     border-color: var(--border-color);
     background: var(--bg-primary);
+    cursor: text;
 }
 
-.title-input:not(:disabled):hover {
+.title-input[contenteditable="true"]:hover {
     border-color: #3b82f6;
 }
 
-.title-input:disabled {
+.title-input[contenteditable="false"] {
     color: var(--text-primary);
     border: none;
     background: transparent;
+    cursor: default;
 }
 
 /* Form Elements */

assets/js/ticket.js

@@ -18,8 +18,13 @@ function saveTicket() {
     
     editables.forEach(field => {
         if (field.dataset.field) {
+            // For contenteditable divs, use textContent/innerText; for inputs/textareas, use value
+            if (field.hasAttribute('contenteditable')) {
+                data[field.dataset.field] = field.textContent.trim();
+            } else {
                 data[field.dataset.field] = field.value;
             }
+        }
     });
 
     // Use the correct API path
@@ -63,19 +68,26 @@ function saveTicket() {
 
 function toggleEditMode() {
     const editButton = document.getElementById('editButton');
-    const editables = document.querySelectorAll('.title-input, textarea[data-field="description"]');
+    const titleField = document.querySelector('.title-input');
+    const descriptionField = document.querySelector('textarea[data-field="description"]');
     const metadataFields = document.querySelectorAll('.editable-metadata');
     const isEditing = editButton.classList.contains('active');
 
     if (!isEditing) {
         editButton.textContent = 'Save Changes';
         editButton.classList.add('active');
-        editables.forEach(field => {
-            field.disabled = false;
-            if (field.classList.contains('title-input')) {
-                field.focus();
+
+        // Enable title (contenteditable div)
+        if (titleField) {
+            titleField.setAttribute('contenteditable', 'true');
+            titleField.focus();
         }
-        });
+
+        // Enable description (textarea)
+        if (descriptionField) {
+            descriptionField.disabled = false;
+        }
+
         // Enable metadata fields (priority, category, type)
         metadataFields.forEach(field => {
             field.disabled = false;
@@ -84,9 +96,17 @@ function toggleEditMode() {
         saveTicket();
         editButton.textContent = 'Edit Ticket';
         editButton.classList.remove('active');
-        editables.forEach(field => {
-            field.disabled = true;
-        });
+
+        // Disable title
+        if (titleField) {
+            titleField.setAttribute('contenteditable', 'false');
+        }
+
+        // Disable description
+        if (descriptionField) {
+            descriptionField.disabled = true;
+        }
+
         // Disable metadata fields
         metadataFields.forEach(field => {
             field.disabled = true;
@@ -231,18 +251,6 @@ document.addEventListener('DOMContentLoaded', function() {
         textarea.style.height = textarea.scrollHeight + 'px';
     }
 
-    // Auto-resize the title textarea to fit content
-    const titleTextarea = document.querySelector('.title-input');
-    if (titleTextarea) {
-        // Initial resize
-        autoResizeTextarea(titleTextarea);
-
-        // Resize on input when in edit mode
-        titleTextarea.addEventListener('input', function() {
-            autoResizeTextarea(this);
-        });
-    }
-
     // Auto-resize the description textarea to fit content
     const descriptionTextarea = document.querySelector('textarea[data-field="description"]');
     if (descriptionTextarea) {

views/TicketView.php

@@ -86,7 +86,7 @@ function formatDetails($details, $actionType) {
         <div class="ascii-content">
             <div class="ascii-frame-inner">
                 <div class="ticket-header">
-                    <h2><textarea class="editable title-input" data-field="title" disabled rows="1"><?php echo htmlspecialchars($ticket["title"]); ?></textarea></h2>
+                    <h2><div class="editable title-input" data-field="title" contenteditable="false"><?php echo htmlspecialchars($ticket["title"]); ?></div></h2>
                     <div class="ticket-subheader">
                         <div class="ticket-metadata">
                             <div class="ticket-id">UUID <?php echo $ticket['ticket_id']; ?></div>