diff --git a/packages/trace-viewer/src/ui/callTab.css b/packages/trace-viewer/src/ui/callTab.css
index f57f3f1529938..e3907f4b3655c 100644
--- a/packages/trace-viewer/src/ui/callTab.css
+++ b/packages/trace-viewer/src/ui/callTab.css
@@ -89,6 +89,7 @@ a.call-value:hover {
 
 .call-value.datetime,
 .call-value.string,
+.call-value.literal,
 .call-value.locator {
   color: var(--vscode-charts-orange);
 }
diff --git a/packages/trace-viewer/src/ui/callTab.tsx b/packages/trace-viewer/src/ui/callTab.tsx
index 94f1938ebf1e5..c3a6d34e5f770 100644
--- a/packages/trace-viewer/src/ui/callTab.tsx
+++ b/packages/trace-viewer/src/ui/callTab.tsx
@@ -44,8 +44,8 @@ export const CallTab: React.FunctionComponent<{
     <div className='call-tab'>
       <div className='call-line'>{action.title}</div>
       <div className='call-section'>Time</div>
-      <DateTimeCallLine name='start:' value={startTime} />
-      <DateTimeCallLine name='duration:' value={renderDuration(action)} />
+      {renderProperty({ name: 'start', type: 'literal', text: startTime })}
+      {renderProperty({ name: 'duration', type: 'literal', text: renderDuration(action) })}
       {
         !!paramKeys.length && <>
           <div className='call-section'>Parameters</div>
@@ -64,11 +64,9 @@ export const CallTab: React.FunctionComponent<{
   );
 };
 
-const DateTimeCallLine: React.FC<{ name: string, value: string }> = ({ name, value }) => <div className='call-line'>{name}<span className='call-value datetime' title={value}>{value}</span></div>;
-
 type Property = {
   name: string;
-  type: 'string' | 'number' | 'object' | 'locator' | 'handle' | 'bigint' | 'boolean' | 'symbol' | 'undefined' | 'function';
+  type: 'literal' | 'string' | 'number' | 'object' | 'locator' | 'handle' | 'bigint' | 'boolean' | 'symbol' | 'undefined' | 'function';
   text: string;
 };
 
@@ -88,7 +86,7 @@ function renderProperty(property: Property) {
   return (
     <div key={property.name} className='call-line'>
       {property.name}:<span className={clsx('call-value', property.type)} title={property.text}>{text}</span>
-      { ['string', 'number', 'object', 'locator'].includes(property.type) &&
+      { ['literal', 'string', 'number', 'object', 'locator'].includes(property.type) &&
         <CopyToClipboard value={property.text} />
       }
     </div>