From 27f46d042460a0feaeeb4e04d9bbef35f925e5b5 Mon Sep 17 00:00:00 2001
From: Mikael Finstad <finstaden@gmail.com>
Date: Fri, 21 Feb 2020 19:09:57 +0800
Subject: [PATCH] fix rendering bug

---
 src/SegmentList.jsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/SegmentList.jsx b/src/SegmentList.jsx
index 4c06fc9e..8302b321 100644
--- a/src/SegmentList.jsx
+++ b/src/SegmentList.jsx
@@ -78,6 +78,8 @@ const SegmentList = memo(({
             return <b style={{ color: 'white', padding: '0 3px', marginRight: 5, background: segBgColor, border: `1px solid ${isActive ? segBorderColor : 'transparent'}`, borderRadius: 10, fontSize: 12 }}>{index + 1}</b>;
           }
 
+          const timeStr = `${formatTimecode(seg.start)} - ${formatTimecode(seg.end)}`;
+
           return (
             <motion.div
               role="button"
@@ -89,9 +91,9 @@ const SegmentList = memo(({
               animate={{ scaleY: 1 }}
               exit={{ scaleY: 0 }}
             >
-              <div style={{ fontSize: 13, whiteSpace: 'nowrap', color: 'white', marginBottom: 3 }}>
+              <div style={{ fontSize: 310 / timeStr.length, whiteSpace: 'nowrap', color: 'white', marginBottom: 3 }}>
                 {renderNumber()}
-                <span>{formatTimecode(seg.start)} - {formatTimecode(seg.end)}</span>
+                <span>{timeStr}</span>
               </div>
               <div style={{ fontSize: 12, color: 'white' }}>{seg.name}</div>
               <div style={{ fontSize: 13 }}>