Fix

.prettierrc

@@ -1,5 +1,5 @@
 {
-    "trailingComma": "es5",
-    "tabWidth": 4,
-    "printWidth": 130
+  "trailingComma": "es5",
+  "tabWidth": 4,
+  "printWidth": 300
 }

inspector/src/components/actionTabs/tabs/propertyGrids/animations/animationCurveEditorComponent.tsx

@@ -2319,17 +2319,7 @@ export class AnimationCurveEditorComponent extends React.Component<
                                     ) : null}
                                 </SvgDraggableArea>
                             )}
-                            <div
-                                style={{
-                                    width: 30,
-                                    height: "inherit",
-                                    position: "absolute",
-                                    zIndex: 1,
-                                    pointerEvents: "none",
-                                    backgroundColor: "rgb(188 188 188 / 11%)",
-                                    top: 40,
-                                }}
-                            ></div>
+                            <div className="rect-chart"></div>
                             <ScaleLabel current={this.state.valueScaleType} />
                         </div>
                     </div>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/curveEditor.scss

@@ -541,6 +541,12 @@
                     padding-right: 10px;
                     width: calc(100vw - 246px);
                     min-width: 786px;
+
+                    .timeline-bar {
+                        width: "100%";
+                        height: 40;
+                        background-color: "#222222";
+                    }
                     &:focus {
                         outline: none;
                     }
@@ -1148,6 +1154,16 @@
             width: calc(100vw - 247px);
             min-width: 781px;
 
+            .rect-chart {
+                width: 30;
+                height: "inherit";
+                position: "absolute";
+                z-index: 1;
+                pointer-events: "none";
+                background-color: "rgb(188 188 188 / 11%)";
+                top: 40;
+            }
+
             .switch-button {
                 background-color: black;
                 width: 30px;

inspector/src/components/actionTabs/tabs/propertyGrids/animations/loadsnippet.tsx

@@ -69,8 +69,7 @@ export class LoadSnippet extends React.Component<ILoadSnippetProps, { snippetId:
 
     loadFromSnippet = () => {
         if (this.state.snippetId !== "") {
-            //How to dispose() previous animations;
-            //How to notify observers
+            //Notify observers
             Animation.CreateFromSnippetAsync(this.state.snippetId)
                 .then((newAnimations) => {
                     // Explore how observers are notified from snippet

inspector/src/components/actionTabs/tabs/propertyGrids/animations/timeline.tsx

@@ -341,9 +341,7 @@ export class Timeline extends React.Component<
 
             if (!(framesTo >= this.state.end - 20)) {
                 let toleft =
-                    framesTo * unit +
-                    this._scrollContainer.current.getBoundingClientRect().left +
-                    this._marginScrollbar * 2;
+                    framesTo * unit + this._scrollContainer.current.getBoundingClientRect().left + this._marginScrollbar * 2;
                 if (this._scrollbarHandle.current) {
                     this._scrollbarHandle.current.style.left = toleft + "px";
                 }
@@ -393,12 +391,7 @@ export class Timeline extends React.Component<
                         scrollable={this._scrollable}
                     />
                     <div className="timeline-wrapper">
-                        <div
-                            ref={this._scrollable}
-                            className="display-line"
-                            onClick={this.setCurrentFrame}
-                            tabIndex={50}
-                        >
+                        <div ref={this._scrollable} className="display-line" onClick={this.setCurrentFrame} tabIndex={50}>
                             <svg
                                 style={{
                                     width: "100%",
@@ -415,8 +408,7 @@ export class Timeline extends React.Component<
                                         <svg key={`tl_${frame}`}>
                                             {
                                                 <>
-                                                    {frame % Math.round(this.state.selectionLength.length / 20) ===
-                                                    0 ? (
+                                                    {frame % Math.round(this.state.selectionLength.length / 20) === 0 ? (
                                                         <>
                                                             <text
                                                                 x={(i * 100) / this.state.selectionLength.length + "%"}
@@ -489,11 +481,7 @@ export class Timeline extends React.Component<
                             onDragStart={this.dragDomFalse}
                         >
                             <div className="scroll-handle" ref={this._scrollContainer} tabIndex={60}>
-                                <div
-                                    className="handle"
-                                    ref={this._scrollbarHandle}
-                                    style={{ width: this.state.scrollWidth }}
-                                >
+                                <div className="handle" ref={this._scrollbarHandle} style={{ width: this.state.scrollWidth }}>
                                     <div className="left-grabber">
                                         <div className="left-draggable">
                                             <div className="grabber"></div>