From 84db41050a2a8c19d0cee328d930f5cd87ee33e2 Mon Sep 17 00:00:00 2001
From: nexiumbiz-debug <265948173+nexiumbiz-debug@users.noreply.github.com>
Date: Sun, 14 Jun 2026 03:48:39 -0400
Subject: [PATCH] fix: keep display grid rows within usable width

---
 .../src/lib/gridsterRenderer.ts               |  6 ++++--
 .../src/lib/tests/gridsterRenderer.spec.ts    | 21 +++++++++++++++++++
 2 files changed, 25 insertions(+), 2 deletions(-)
 create mode 100644 projects/angular-gridster2/src/lib/tests/gridsterRenderer.spec.ts

diff --git a/projects/angular-gridster2/src/lib/gridsterRenderer.ts b/projects/angular-gridster2/src/lib/gridsterRenderer.ts
index bfcd246d..e38e9fee 100644
--- a/projects/angular-gridster2/src/lib/gridsterRenderer.ts
+++ b/projects/angular-gridster2/src/lib/gridsterRenderer.ts
@@ -153,11 +153,13 @@ export class GridsterRenderer {
   }
 
   getGridRowStyle(i: number): CommonGridStyle {
-    const margin = this.gridster.$options().margin;
+    const $options = this.gridster.$options();
+    const margin = $options.margin;
+    const trailingMargin = $options.outerMargin ? margin : -margin;
     // generates the new style
     const newPos: GridRowCachedStyle = {
       top: this.gridster.curRowHeight * i,
-      width: this.gridster.gridColumns.length * this.gridster.curColWidth + margin,
+      width: this.gridster.gridColumns.length * this.gridster.curColWidth + trailingMargin,
       height: this.gridster.curRowHeight - margin,
       style: {}
     };
diff --git a/projects/angular-gridster2/src/lib/tests/gridsterRenderer.spec.ts b/projects/angular-gridster2/src/lib/tests/gridsterRenderer.spec.ts
new file mode 100644
index 00000000..54dd3b3e
--- /dev/null
+++ b/projects/angular-gridster2/src/lib/tests/gridsterRenderer.spec.ts
@@ -0,0 +1,21 @@
+import { signal } from '@angular/core';
+
+import { GridsterRenderer } from '../gridsterRenderer';
+
+describe('gridsterRenderer service', () => {
+  it('keeps display grid rows inside the usable width without outer margin', () => {
+    const gridster: any = {
+      $options: signal({
+        margin: 20,
+        outerMargin: false,
+        useTransformPositioning: true
+      }),
+      gridColumns: new Array(24),
+      curColWidth: 25,
+      curRowHeight: 61
+    };
+    const renderer = new GridsterRenderer(gridster);
+
+    expect(renderer.getGridRowStyle(0).width).toBe('580px');
+  });
+});