From aba450bd235cb9a63cefb575cea558e230a71936 Mon Sep 17 00:00:00 2001
From: Robert Knight <robertknight@gmail.com>
Date: Mon, 19 Jun 2023 12:26:30 +0100
Subject: [PATCH] Add right padding to transcript segments and justify text

Add right padding to prevent buckets from the client's bucket bar overlapping
the text, and justify to avoid ragged right edges in multi-line segments.
---
 .../scripts/video_player/components/Transcript.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/via/static/scripts/video_player/components/Transcript.tsx b/via/static/scripts/video_player/components/Transcript.tsx
index eadaae00..aa51b3ad 100644
--- a/via/static/scripts/video_player/components/Transcript.tsx
+++ b/via/static/scripts/video_player/components/Transcript.tsx
@@ -181,10 +181,16 @@ function TranscriptSegment({
         data-timestamp={timestamp}
       />
       <p
-        className={classnames('grow peer-hover:text-stone-900', {
-          'text-stone-600': !isCurrent,
-          'text-stone-800': isCurrent,
-        })}
+        className={classnames(
+          'grow text-justify peer-hover:text-stone-900',
+          {
+            'text-stone-600': !isCurrent,
+            'text-stone-800': isCurrent,
+          },
+
+          // Avoid buckets overlapping highlighted text.
+          'pr-[30px]'
+        )}
         data-testid="transcript-text"
         ref={contentRef}
       >