Make the waveform rendering more precisely positioned

src/components/sound-editor/sound-editor.css

@@ -63,7 +63,6 @@
     background: hsla(300, 53%, 60%, 0.15);
     border: 1px solid $ui-black-transparent;
     border-radius: 5px;
-    padding: 3px;
 
     margin-top: 20px;
     margin-bottom: 20px;

src/components/waveform/waveform.jsx

@@ -19,17 +19,18 @@ class Waveform extends React.PureComponent {
         // composite time when animating the playhead
         const takeEveryN = Math.ceil(data.length / width);
 
-        const filteredData = takeEveryN === 1 ? data :
+        const filteredData = takeEveryN === 1 ? data.slice(0) :
             data.filter((_, i) => i % takeEveryN === 0);
 
-        const cappedData = [0, ...filteredData, 0];
+        filteredData[0] = 0;
+        filteredData[filteredData.length - 1] = 0;
 
         const points = [
-            ...cappedData.map((v, i) =>
-                [width * i / cappedData.length, height * v / 2]
+            ...filteredData.map((v, i) =>
+                [width * i / filteredData.length, height * v / 2]
             ),
-            ...cappedData.reverse().map((v, i) =>
-                [width * (cappedData.length - i - 1) / cappedData.length, -height * v / 2]
+            ...filteredData.reverse().map((v, i) =>
+                [width * (filteredData.length - i - 1) / filteredData.length, -height * v / 2]
             )
         ];
         const pathComponents = points.map(([x, y], i) => {