diff --git a/ide/src/trace/component/SpSystemTrace.ts b/ide/src/trace/component/SpSystemTrace.ts
index 2424b12b13a3b07841bb61145a6342dfd3f4e3cf..1d569e89e4a9dae7744bebbd9b13fd8d8e99b7c4 100644
--- a/ide/src/trace/component/SpSystemTrace.ts
+++ b/ide/src/trace/component/SpSystemTrace.ts
@@ -664,11 +664,11 @@ export class SpSystemTrace extends BaseElement {
     };
     // @ts-ignore
     new ResizeObserver((entries) => {
-      let width = entries[0].contentRect.width - 1 - SpSystemTrace.scrollViewWidth;
+      TraceRow.FRAME_WIDTH = this.clientWidth - 249;
       requestAnimationFrame(() => {
-        this.timerShaftEL?.updateWidth(width);
+        this.timerShaftEL?.updateWidth(this.clientWidth);
         this.shadowRoot!.querySelectorAll<TraceRow<any>>('trace-row').forEach((it) => {
-          it.updateWidth(width);
+          it.updateWidth(this.clientWidth);
         });
       });
     }).observe(this);
@@ -991,14 +991,14 @@ export class SpSystemTrace extends BaseElement {
     drawFlagLineSegment(this.canvasPanelCtx, this.hoverFlag, this.selectFlag, {
       x: 0,
       y: 0,
-      width: this.timerShaftEL?.canvas?.clientWidth,
+      width: TraceRow.FRAME_WIDTH,
       height: this.canvasPanel?.clientHeight,
     });
     //draw flag line segment for favorite canvas
     drawFlagLineSegment(this.canvasFavoritePanelCtx, this.hoverFlag, this.selectFlag, {
       x: 0,
       y: 0,
-      width: this.timerShaftEL?.canvas?.clientWidth,
+      width: TraceRow.FRAME_WIDTH,
       height: this.canvasFavoritePanel?.clientHeight,
     });
     //draw wakeup for main canvas
@@ -1011,7 +1011,7 @@ export class SpSystemTrace extends BaseElement {
       {
         x: 0,
         y: 0,
-        width: this.timerShaftEL!.canvas!.clientWidth,
+        width: TraceRow.FRAME_WIDTH,
         height: this.canvasPanel!.clientHeight!,
       } as Rect
     );
@@ -1025,7 +1025,7 @@ export class SpSystemTrace extends BaseElement {
       {
         x: 0,
         y: 0,
-        width: this.timerShaftEL!.canvas!.clientWidth,
+        width: TraceRow.FRAME_WIDTH,
         height: this.canvasFavoritePanel!.clientHeight!,
       } as Rect
     );
diff --git a/ide/src/trace/component/trace/base/TraceRow.ts b/ide/src/trace/component/trace/base/TraceRow.ts
index 1ac6c0419803ea676f210077db3483bfa8baf36c..8ab8ad4b5364b50654538f8f32d56636119e0020 100644
--- a/ide/src/trace/component/trace/base/TraceRow.ts
+++ b/ide/src/trace/component/trace/base/TraceRow.ts
@@ -87,6 +87,7 @@ export class TraceRow<T extends BaseStruct> extends HTMLElement {
   static ROW_TYPE_IRQ_GROUP = 'irq-group';
   static ROW_TYPE_IRQ = 'irq';
   static ROW_TYPE_JANK = 'janks';
+  static FRAME_WIDTH: number = 0;
   static range: TimeRange | undefined | null;
   static rangeSelectObject: RangeSelectStruct | undefined;
   public obj: TraceRowObject<any> | undefined | null;
@@ -385,14 +386,14 @@ export class TraceRow<T extends BaseStruct> extends HTMLElement {
 
   get frame(): Rect | any {
     if (this._frame) {
-      this._frame.width = (this.parentElement?.clientWidth || 0) - 248 - SpSystemTrace.scrollViewWidth;
+      this._frame.width = TraceRow.FRAME_WIDTH;
       this._frame.height = this.clientHeight;
       return this._frame;
     } else {
       this._frame = new Rect(
         0,
         0,
-        (this.parentElement?.clientWidth || 0) - 248 - SpSystemTrace.scrollViewWidth,
+        TraceRow.FRAME_WIDTH,
         this.clientHeight || 40
       );
       return this._frame;