Refines Webhook Inspector preview header and glow

Changes new-event highlight to orange and updates glow animation for clearer emphasis
Introduces a flexible header that aligns title and timestamp, truncates long titles, and lightens timestamp styling
Improves readability and prevents overflow without altering logic

Author: mbertelsen

src/components/WebhookInspector.css

@@ -7,17 +7,18 @@
 .webhook-events-ul{list-style:none;margin:0;padding:0;overflow:auto;flex:1}
 .webhook-event-item{padding:10px;border-bottom:1px solid #f0f0f0;cursor:pointer;transition:background 0.2s}
 .webhook-event-item.selected{background:#f7fbff}
-.webhook-event-item.new-event{animation:eventGlow 0.5s ease-out;box-shadow:0 0 0 2px #4a90e2}
-@keyframes eventGlow{0%{box-shadow:0 0 8px 4px rgba(74,144,226,0.6),0 0 0 2px #4a90e2}100%{box-shadow:0 0 0 0 rgba(74,144,226,0),0 0 0 2px #4a90e2}}
+.webhook-event-item.new-event{animation:eventGlow 0.5s ease-out;box-shadow:0 0 0 2px #ff7a00}
+@keyframes eventGlow{0%{box-shadow:0 0 8px 4px rgba(255,122,0,0.6),0 0 0 2px #ff7a00}100%{box-shadow:0 0 0 0 rgba(255,122,0,0),0 0 0 2px #ff7a00}}
 .event-type{font-size:13px;color:#333}
 .event-meta{font-size:12px;color:#777}
 .event-session-indicators{display:flex;gap:6px;margin-top:6px;align-items:center}
 .session-dot{width:10px;height:10px;border-radius:50%;border:1px solid rgba(0,0,0,0.1)}
 .no-events{padding:12px;color:#666}
 .webhook-inspector-preview{flex:1;padding:12px;overflow:hidden;min-width:0;display:flex;flex-direction:column}
 .webhook-inspector-preview > div{display:flex;flex-direction:column;flex:1;min-height:0}
-.preview-title{margin-top:0}
-.preview-time{margin-bottom:8px;color:#666}
+.preview-header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
+.preview-title{margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.preview-time{color:#999;font-size:11px;flex-shrink:0}
 .preview-json{background:#fafafa;padding:12px;border-radius:6px;overflow:auto}
 .preview-empty{color:#666}
 
@@ -54,4 +55,3 @@
 /* Loading message in list */
 .loading-events-message{padding:20px;text-align:center;color:#666;display:flex;flex-direction:column;align-items:center;gap:12px}
 .loading-events-spinner{width:32px;height:32px;border:3px solid #e8e8e8;border-top-color:#4a90e2;border-radius:50%;animation:spin 0.8s linear infinite}
-

src/components/WebhookInspector.tsx

@@ -708,9 +708,10 @@ const WebhookInspector: React.FC<Props> = ({ userPath, selectedDeviceId = null,
       <div className="webhook-inspector-preview">
         {selectedEvent ? (
           <div>
-            <h4 className="preview-title">{selectedEvent.eventType}</h4>
-            <div className="preview-time">{new Date(selectedEvent.timestamp).toLocaleString()}</div>
-            
+            <div className="preview-header">
+              <h4 className="preview-title">{selectedEvent.eventType}</h4>
+              <div className="preview-time">{new Date(selectedEvent.timestamp).toLocaleString()}</div>
+            </div>
             {/* Display course information if available for this activity session */}
             {(() => {
               const { activitySessionId } = getSessionIds(selectedEvent);