fix: scale horizontal layout width with display.scale

HorizontalScreenLayout scaled this.height by display.scale but left
this.width in unscaled layout units. ScoreRenderer publishes that value
as renderFinished.totalWidth, which on web sizes the overflow:hidden
surface element, so with a scale above 1 everything past 1/scale of the
score was clipped and unreachable by scrolling.

Keep this.width in scaled units for the whole layout pass like the
vertical layouts do, and use scaledWidth for the per-partial totalWidth.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: leocaseiro

packages/alphatab/src/rendering/layout/HorizontalScreenLayout.ts

@@ -119,7 +119,8 @@ export class HorizontalScreenLayout extends ScoreLayout {
         this._finalizeStaffSystem();
 
         this.height = Math.floor(this._system.y + this._system.height);
-        this.width = this._system.x + this._system.width + this.pagePadding![2];
+        this.width =
+            (this._system.x + this._system.width + this.pagePadding![2]) * this.renderer.settings.display.scale;
         currentBarIndex = 0;
 
         let x = 0;
@@ -130,7 +131,7 @@ export class HorizontalScreenLayout extends ScoreLayout {
             e.reuseViewport = renderHints?.reuseViewport ?? false;
             e.x = x;
             e.y = 0;
-            e.totalWidth = this.width;
+            e.totalWidth = this.scaledWidth;
             e.totalHeight = this.height;
             e.width = partial.width;
             e.height = this.height;

packages/alphatab/test/rendering/HorizontalScreenLayoutScale.test.ts

@@ -0,0 +1,66 @@
+import { AlphaTexImporter } from '@coderline/alphatab/importer/AlphaTexImporter';
+import { ByteBuffer } from '@coderline/alphatab/io/ByteBuffer';
+import { LayoutMode } from '@coderline/alphatab/LayoutMode';
+import type { Score } from '@coderline/alphatab/model/Score';
+import type { RenderFinishedEventArgs } from '@coderline/alphatab/rendering/RenderFinishedEventArgs';
+import { ScoreRenderer } from '@coderline/alphatab/rendering/ScoreRenderer';
+import { Settings } from '@coderline/alphatab/Settings';
+import { describe, expect, it } from 'vitest';
+
+describe('HorizontalScreenLayoutScale', () => {
+    // more bars than display.barCountPerPartial so that multiple partials are produced
+    const tex = `\\title "scale"\n.${new Array(24).fill('3.3.4*4').join(' | ')}`;
+
+    function createSettings(scale: number): Settings {
+        const settings = new Settings();
+        settings.core.enableLazyLoading = true;
+        settings.display.layoutMode = LayoutMode.Horizontal;
+        settings.display.scale = scale;
+        // the page padding is scale independent, without it the totals scale exactly
+        settings.display.padding = [0, 0, 0, 0];
+        return settings;
+    }
+
+    function loadScore(settings: Settings): Score {
+        const importer = new AlphaTexImporter();
+        importer.init(ByteBuffer.fromString(tex), settings);
+        return importer.readScore();
+    }
+
+    function render(scale: number): [RenderFinishedEventArgs, RenderFinishedEventArgs[]] {
+        const settings = createSettings(scale);
+        const renderer = new ScoreRenderer(settings);
+        renderer.width = 1300;
+
+        const partials: RenderFinishedEventArgs[] = [];
+        let total: RenderFinishedEventArgs | undefined;
+        renderer.partialLayoutFinished.on(e => partials.push(e));
+        renderer.renderFinished.on(e => {
+            total = e;
+        });
+        renderer.error.on(e => {
+            throw e;
+        });
+        renderer.renderScore(loadScore(settings), [0]);
+
+        expect(total).toBeDefined();
+        expect(partials.length).toBeGreaterThan(1);
+        return [total!, partials];
+    }
+
+    it('scales the reported total width like the total height', () => {
+        const [unscaled] = render(1);
+        const [scaled] = render(2);
+
+        expect(scaled.totalWidth).toBeCloseTo(unscaled.totalWidth * 2, 0);
+        expect(scaled.totalHeight).toBeCloseTo(unscaled.totalHeight * 2, 0);
+    });
+
+    it('reports the same total width on the partials as on the final result', () => {
+        const [total, partials] = render(2);
+
+        for (const partial of partials) {
+            expect(Math.abs(partial.totalWidth - total.totalWidth)).toBeLessThanOrEqual(2);
+        }
+    });
+});