diff --git a/src/browser/Decorations/OverviewRulerRenderer.ts b/src/browser/Decorations/OverviewRulerRenderer.ts
index 083db5e9..7d8475f2 100644
--- a/src/browser/Decorations/OverviewRulerRenderer.ts
+++ b/src/browser/Decorations/OverviewRulerRenderer.ts
@@ -45,6 +45,11 @@ export class OverviewRulerRenderer extends Disposable {
     this.register(addDisposableDomListener(window, 'resize', () => this.refreshDecorations()));
     this.register(this._decorationService.onDecorationRegistered(() => this._queueRefresh()));
     this.register(this._decorationService.onDecorationRemoved(decoration => this._removeDecoration(decoration)));
+    this.register(this._optionsService.onOptionChange(o => {
+      if (o === 'overviewRulerWidth') {
+        this.refreshDecorations();
+      }
+    }));
   }
 
   public override dispose(): void {
@@ -85,9 +90,9 @@ export class OverviewRulerRenderer extends Disposable {
   }
 
   public refreshDecorations(): void {
-    this._canvas.style.width = `${this._canvas.width || ScrollbarConstants.WIDTH}px`;
+    this._canvas.style.width = `${this._optionsService.options.overviewRulerWidth || ScrollbarConstants.WIDTH}px`;
     this._canvas.style.height = `${this._screenElement.clientHeight}px`;
-    this._canvas.width = Math.floor((this._canvas.width || ScrollbarConstants.WIDTH)* window.devicePixelRatio);
+    this._canvas.width = Math.floor((this._optionsService.options.overviewRulerWidth || ScrollbarConstants.WIDTH)* window.devicePixelRatio);
     this._canvas.height = Math.floor(this._screenElement.clientHeight * window.devicePixelRatio);
 
     for (const decoration of this._decorationService.decorations) {