From 756a1f93b9a48dbdfd0791dcd1ddcfb7292d484d Mon Sep 17 00:00:00 2001
From: rishikanthc <rishikanthc@gmail.com>
Date: Mon, 27 Apr 2026 01:43:48 -0700
Subject: [PATCH] Align transcript timestamps

---
 .../components/AudioDetailView.tsx            |  8 +++----
 web/frontend/src/styles/design-system.css     | 24 ++++++++++---------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/web/frontend/src/features/transcription/components/AudioDetailView.tsx b/web/frontend/src/features/transcription/components/AudioDetailView.tsx
index 552821c0..1725bfad 100644
--- a/web/frontend/src/features/transcription/components/AudioDetailView.tsx
+++ b/web/frontend/src/features/transcription/components/AudioDetailView.tsx
@@ -213,11 +213,9 @@ function TranscriptMock({ segments }: { segments: MockSegment[] }) {
     <section className="scr-transcript" aria-label="Transcript">
       {segments.map((segment) => (
         <article className="scr-transcript-segment" key={segment.id}>
-          <div className="scr-transcript-meta">
-            {segment.speaker ? <span>{segment.speaker}</span> : null}
-            <time>{formatSegmentTime(segment.start)}</time>
-          </div>
-          <p>{segment.text}</p>
+          {segment.speaker ? <span className="scr-transcript-speaker">{segment.speaker}</span> : null}
+          <time className="scr-transcript-time">{formatSegmentTime(segment.start)}</time>
+          <p className="scr-transcript-text">{segment.text}</p>
         </article>
       ))}
     </section>
diff --git a/web/frontend/src/styles/design-system.css b/web/frontend/src/styles/design-system.css
index 67caf10a..90110edb 100644
--- a/web/frontend/src/styles/design-system.css
+++ b/web/frontend/src/styles/design-system.css
@@ -171,38 +171,40 @@
 }
 
 .scr-transcript-segment {
+  --scr-transcript-row-line: 1.68;
   display: grid;
   grid-template-columns: 58px minmax(0, 1fr);
   align-items: start;
   gap: var(--scr-space-4);
 }
 
-.scr-transcript-meta {
-  display: flex;
-  align-items: baseline;
-  justify-content: flex-end;
-  gap: var(--scr-space-2);
+.scr-transcript-time {
+  align-self: start;
+  justify-self: end;
   color: var(--scr-text-tertiary);
   font-size: 0.8125rem;
   font-weight: 600;
-  line-height: 1;
-  padding-top: 0.32rem;
+  line-height: var(--scr-transcript-row-line);
   white-space: nowrap;
 }
 
-.scr-transcript-meta span {
+.scr-transcript-speaker {
+  grid-column: 1 / -1;
   overflow: hidden;
-  max-width: 86px;
   color: var(--scr-text-secondary);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  line-height: 1.2;
   text-overflow: ellipsis;
 }
 
-.scr-transcript-segment p {
+.scr-transcript-text {
   color: var(--scr-text-primary);
   font-size: 1.0625rem;
   font-weight: 500;
   letter-spacing: 0;
-  line-height: 1.68;
+  line-height: var(--scr-transcript-row-line);
+  margin: 0;
 }
 
 .scr-player-shell {