Layout dimension left/right after renderer dims change

Fixes #3773

src/browser/Decorations/BufferDecorationRenderer.ts

@@ -14,6 +14,7 @@ export class BufferDecorationRenderer extends Disposable {
 
   private _animationFrame: number | undefined;
   private _altBufferIsActive: boolean = false;
+  private _dimensionsChanged: boolean = false;
 
   constructor(
     private readonly _screenElement: HTMLElement,
@@ -28,7 +29,10 @@ export class BufferDecorationRenderer extends Disposable {
     this._screenElement.appendChild(this._container);
 
     this.register(this._renderService.onRenderedBufferChange(() => this._queueRefresh()));
-    this.register(this._renderService.onDimensionsChange(() => this._queueRefresh()));
+    this.register(this._renderService.onDimensionsChange(() => {
+      this._dimensionsChanged = true;
+      this._queueRefresh();
+    }));
     this.register(addDisposableDomListener(window, 'resize', () => this._queueRefresh()));
     this.register(this._bufferService.buffers.onBufferActivate(() => {
       this._altBufferIsActive = this._bufferService.buffer === this._bufferService.buffers.alt;
@@ -70,6 +74,9 @@ export class BufferDecorationRenderer extends Disposable {
       this._container.appendChild(element);
     }
     this._refreshStyle(decoration, element);
+    if (this._dimensionsChanged) {
+      this._refreshXPosition(decoration, element);
+    }
     decoration.onRenderEmitter.fire(element);
   }
 
@@ -86,11 +93,7 @@ export class BufferDecorationRenderer extends Disposable {
       // exceeded the container width, so hide
       element.style.display = 'none';
     }
-    if ((decoration.options.anchor || 'left') === 'right') {
-      element.style.right = x ? `${x * this._renderService.dimensions.actualCellWidth}px` : '';
-    } else {
-      element.style.left = x ? `${x * this._renderService.dimensions.actualCellWidth}px` : '';
-    }
+    this._refreshXPosition(decoration, element, x);
 
     return element;
   }
@@ -106,6 +109,14 @@ export class BufferDecorationRenderer extends Disposable {
     }
   }
 
+  private _refreshXPosition(decoration: IInternalDecoration, element: HTMLElement, x: number = decoration.options.x ?? 0): void {
+    if ((decoration.options.anchor || 'left') === 'right') {
+      element.style.right = x ? `${x * this._renderService.dimensions.actualCellWidth}px` : '';
+    } else {
+      element.style.left = x ? `${x * this._renderService.dimensions.actualCellWidth}px` : '';
+    }
+  }
+
   private _removeDecoration(decoration: IInternalDecoration): void {
     this._decorationElements.get(decoration)?.remove();
     this._decorationElements.delete(decoration);

src/browser/TestUtils.test.ts

@@ -396,7 +396,7 @@ export class MockRenderService implements IRenderService {
   public resize(cols: number, rows: number): void {
     throw new Error('Method not implemented.');
   }
-  public changeOptions(): void {
+  public _handleOptionsChanged(): void {
     throw new Error('Method not implemented.');
   }
   public setRenderer(renderer: IRenderer): void {

src/browser/services/RenderService.ts

@@ -69,7 +69,7 @@ export class RenderService extends Disposable implements IRenderService {
 
     this.register(bufferService.onResize(() => this._fullRefresh()));
     this.register(bufferService.buffers.onBufferActivate(() => this._renderer?.clear()));
-    this.register(optionsService.onOptionChange(() => this._renderer.onOptionsChanged()));
+    this.register(optionsService.onOptionChange(() => this._handleOptionsChanged()));
     this.register(this._charSizeService.onCharSizeChange(() => this.onCharSizeChanged()));
 
     // No need to register this as renderer is explicitly disposed in RenderService.dispose
@@ -135,7 +135,7 @@ export class RenderService extends Disposable implements IRenderService {
     this._fireOnCanvasResize();
   }
 
-  public changeOptions(): void {
+  private _handleOptionsChanged(): void {
     this._renderer.onOptionsChanged();
     this.refreshRows(0, this._rowCount - 1);
     this._fireOnCanvasResize();

src/browser/services/Services.ts

@@ -61,7 +61,6 @@ export interface IRenderService extends IDisposable {
   refreshRows(start: number, end: number): void;
   clearTextureAtlas(): void;
   resize(cols: number, rows: number): void;
-  changeOptions(): void;
   setRenderer(renderer: IRenderer): void;
   setColors(colors: IColorSet): void;
   onDevicePixelRatioChange(): void;