From e7c474e7f647fffec312c843eb6fc97ac646fd7b Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Tue, 20 Aug 2019 07:42:54 -0700
Subject: [PATCH] Inline style

---
 js/components/MainWindow/Marquee.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/js/components/MainWindow/Marquee.tsx b/js/components/MainWindow/Marquee.tsx
index 529f103b..69464d07 100644
--- a/js/components/MainWindow/Marquee.tsx
+++ b/js/components/MainWindow/Marquee.tsx
@@ -123,11 +123,6 @@ const Marquee = React.memo(() => {
   const { handleMouseDown, dragOffset, dragging } = useDragX();
   const offset = stepOffset(text, marqueeStep, dragOffset);
   const offsetPixels = pixelUnits(-offset);
-  const style: React.CSSProperties = {
-    whiteSpace: "nowrap",
-    willChange: "transform",
-    transform: `translateX(${offsetPixels})`,
-  };
 
   useStepper({ step: stepMarquee, dragging });
 
@@ -139,7 +134,11 @@ const Marquee = React.memo(() => {
       title="Song Title"
     >
       <div
-        style={style}
+        style={{
+          whiteSpace: "nowrap",
+          willChange: "transform",
+          transform: `translateX(${offsetPixels})`,
+        }}
         // Force the DOM node to be recreated when the doubled size changes.
         // This works around a Chrome browser bug where the `will-change: transform;`
         // on this node seems to cause a change to the `image-rendering: