From dfce23850b0243272599979e06ab554a04c4f81b Mon Sep 17 00:00:00 2001
From: gkrajniak <gkrajniak@gmail.com>
Date: Wed, 10 Jun 2026 14:46:29 +0200
Subject: [PATCH 1/7] Adjust the dragging cursor

Signed-off-by: gkrajniak <gkrajniak@gmail.com>
---
 .../card/dashboard-card.component.scss        | 11 +++++++
 .../dashboard/dashboard.component.html        | 32 +++++++++++++------
 .../dashboard/dashboard.component.scss        | 12 +++++++
 .../declarative-ui/stories/dashboard.cards.ts |  2 +-
 .../stories/dashboard.stories.ts              |  2 +-
 5 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/projects/ngx/declarative-ui/dashboard/card/dashboard-card.component.scss b/projects/ngx/declarative-ui/dashboard/card/dashboard-card.component.scss
index c743120..5e9bfb9 100644
--- a/projects/ngx/declarative-ui/dashboard/card/dashboard-card.component.scss
+++ b/projects/ngx/declarative-ui/dashboard/card/dashboard-card.component.scss
@@ -34,6 +34,10 @@
   padding-inline-start: var(--mfp_cardContainerPadding, 10px);
   padding-inline-end: var(--mfp_cardContainerPadding, 10px);
 
+  &--editing {
+    cursor: grab;
+  }
+
   &--editing:hover {
     --sapTile_BorderColor: var(--sapHighlightColor, #0070f2);
     --sapGroup_ContentBorderColor: var(--sapHighlightColor, #0070f2);
@@ -44,6 +48,13 @@
   }
 }
 
+// Gridstack adds .ui-draggable-dragging to the <gridstack-item> wrapping this
+// card while a drag is active. Override the open-palm `grab` cursor with the
+// closed-fist `grabbing` cursor for the duration of the drag.
+:host-context(.ui-draggable-dragging) .component-card--editing {
+  cursor: grabbing !important;
+}
+
 .component-host {
   position: relative;
   height: 100%;
diff --git a/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.html b/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.html
index c95ceec..2ded5e1 100644
--- a/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.html
+++ b/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.html
@@ -23,7 +23,10 @@
         </div>
         @if (config().description) {
           <ui5-title level="H5" size="H5" wrapping-type="Normal">
-            <span class="mfp-dashboard__description" [innerHTML]="safeDescription()"></span>
+            <span
+              class="mfp-dashboard__description"
+              [innerHTML]="safeDescription()"
+            ></span>
           </ui5-title>
         }
       </div>
@@ -33,7 +36,11 @@
           <ui5-button
             #editCardsBtn
             id="edit-cards-btn"
-            [accessibleName]="editCardsButton().text || editCardsButton().tooltip || 'Edit Cards'"
+            [accessibleName]="
+              editCardsButton().text ||
+              editCardsButton().tooltip ||
+              'Edit Cards'
+            "
             [design]="editCardsButton().design"
             [icon]="editCardsButton().icon"
             [tooltip]="editCardsButton().tooltip"
@@ -90,7 +97,9 @@
         } @else {
           @if (config().editButtonFirst && config().editable) {
             <ui5-button
-              [accessibleName]="editViewButton().text || editViewButton().tooltip || 'Edit View'"
+              [accessibleName]="
+                editViewButton().text || editViewButton().tooltip || 'Edit View'
+              "
               [design]="editViewButton().design"
               [icon]="editViewButton().icon"
               [tooltip]="editViewButton().tooltip"
@@ -113,7 +122,9 @@
           }
           @if (!config().editButtonFirst && config().editable) {
             <ui5-button
-              [accessibleName]="editViewButton().text || editViewButton().tooltip || 'Edit View'"
+              [accessibleName]="
+                editViewButton().text || editViewButton().tooltip || 'Edit View'
+              "
               [design]="editViewButton().design"
               [icon]="editViewButton().icon"
               [tooltip]="editViewButton().tooltip"
@@ -143,12 +154,15 @@
     }
   </div>
 
-  <gridstack #grid [options]="gridOptions()" (addedCB)="onGridChange($event)" (changeCB)="onGridChange($event)" (removedCB)="onGridChange($event)">
+  <gridstack
+    #grid
+    [options]="gridOptions()"
+    (addedCB)="onGridChange($event)"
+    (changeCB)="onGridChange($event)"
+    (removedCB)="onGridChange($event)"
+  >
     @for (card of looseCards(); track card.id) {
-      <gridstack-item
-        [options]="card"
-        [style.cursor]="editMode() ? 'pointer' : 'auto'"
-      >
+      <gridstack-item [options]="card">
         <mfp-dashboard-card
           [card]="card"
           [editMode]="editMode()"
diff --git a/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.scss b/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.scss
index 2e9a8bc..bc0fb0e 100644
--- a/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.scss
+++ b/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.scss
@@ -145,3 +145,15 @@ mfp-wc-dashboard {
     padding: calc(var(--sapShell_Space_L, 2rem) - 10px);
   }
 }
+
+// While Gridstack is dragging an item, force the grabbing (closed-fist) cursor
+// across the whole grid. Gridstack 12 sets `pointer-events: none` on the drag
+// helper (see node_modules/gridstack/dist/dd-draggable.js:316) which prevents
+// it from setting its own cursor — the maintainer's TODO comment on the next
+// line confirms this is a known browser limitation. As a substitute, Gridstack
+// adds `.grid-stack-dragging` to the grid host for the duration of the drag,
+// which is the official hook for global drag styling.
+.grid-stack.grid-stack-dragging,
+.grid-stack.grid-stack-dragging * {
+  cursor: grabbing !important;
+}
diff --git a/projects/ngx/declarative-ui/stories/dashboard.cards.ts b/projects/ngx/declarative-ui/stories/dashboard.cards.ts
index 256a85f..f1052df 100644
--- a/projects/ngx/declarative-ui/stories/dashboard.cards.ts
+++ b/projects/ngx/declarative-ui/stories/dashboard.cards.ts
@@ -75,7 +75,7 @@ export const CARDS: CardConfig[] = [
   {
     id: 'table-pods',
     w: 12,
-    h: 35,
+    h: 45,
     component: 'mfp-wc-declarative-table-card',
     componentInputs: {
       config: TABLE_CARD_CONFIG,
diff --git a/projects/ngx/declarative-ui/stories/dashboard.stories.ts b/projects/ngx/declarative-ui/stories/dashboard.stories.ts
index de617bf..ca2de8e 100644
--- a/projects/ngx/declarative-ui/stories/dashboard.stories.ts
+++ b/projects/ngx/declarative-ui/stories/dashboard.stories.ts
@@ -49,7 +49,7 @@ const AVAILABLE_CARDS: CardConfig[] = [
     id: 'table-pods',
     label: 'Pods Table',
     w: 12,
-    h: 35,
+    h: 45,
     component: 'mfp-wc-declarative-table-card',
     componentInputs: {
       config: TABLE_CARD_CONFIG,

From e1bd42ba57edf5893d6b9e22dc79083a541cb235 Mon Sep 17 00:00:00 2001
From: gkrajniak <gkrajniak@gmail.com>
Date: Wed, 10 Jun 2026 14:51:52 +0200
Subject: [PATCH 2/7] Adjust the dragging cursor

Signed-off-by: gkrajniak <gkrajniak@gmail.com>
---
 .../dashboard/card/dashboard-card.component.scss     | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/projects/ngx/declarative-ui/dashboard/card/dashboard-card.component.scss b/projects/ngx/declarative-ui/dashboard/card/dashboard-card.component.scss
index 5e9bfb9..800d579 100644
--- a/projects/ngx/declarative-ui/dashboard/card/dashboard-card.component.scss
+++ b/projects/ngx/declarative-ui/dashboard/card/dashboard-card.component.scss
@@ -55,6 +55,18 @@
   cursor: grabbing !important;
 }
 
+// Keep the edit-mode highlight (blue border + resize-corner icon) visible on
+// the dragged card. The browser stops firing :hover events during a drag, so
+// we re-apply the same styles using the same Gridstack hook used for cursor.
+:host-context(.ui-draggable-dragging) .component-card--editing {
+  --sapTile_BorderColor: var(--sapHighlightColor, #0070f2);
+  --sapGroup_ContentBorderColor: var(--sapHighlightColor, #0070f2);
+}
+
+:host-context(.ui-draggable-dragging) .component-card--editing .card__resize-indicator {
+  opacity: 1;
+}
+
 .component-host {
   position: relative;
   height: 100%;

From c75fde510c4e10aa58019a56407f4d2caf12f6e4 Mon Sep 17 00:00:00 2001
From: gkrajniak <gkrajniak@gmail.com>
Date: Wed, 10 Jun 2026 15:48:22 +0200
Subject: [PATCH 3/7] Adjust after review

Signed-off-by: gkrajniak <gkrajniak@gmail.com>
---
 .../dashboard/dashboard/dashboard.component.ts         | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.ts b/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.ts
index 3fe64ad..70b0368 100644
--- a/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.ts
+++ b/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.ts
@@ -3,10 +3,10 @@ import { DashboardCard } from '../card/dashboard-card.component';
 import { addComponentToRegistry } from '../card/utils/dashboard-card-registry';
 import { DiscardChangesDialog } from '../discard-changes-dialog/discard-changes-dialog.component';
 import { EditCardsDialog } from '../edit-cards-dialog/edit-cards-dialog.component';
-import { UnsavedChangesDialog } from '../unsaved-changes-dialog/unsaved-changes-dialog.component';
 import { CardConfig, DashboardConfig, SectionConfig } from '../models';
 import { CELL_HEIGHT, COMPACT_BREAKPOINT } from '../models/constants';
 import { DashboardSection } from '../section/dashboard-section.component';
+import { UnsavedChangesDialog } from '../unsaved-changes-dialog/unsaved-changes-dialog.component';
 import {
   Component,
   ElementRef,
@@ -145,11 +145,11 @@ export class Dashboard implements OnInit, OnDestroy {
       marginLeft: 0,
       marginRight: 0,
       columnOpts: {
-        breakpointForWindow: true,
         breakpoints: [
-          { w: 1440, c: 12, layout: 'none' },
-          { w: 1024, c: 8, layout: 'compact' },
-          { w: 600, c: 1, layout: 'list' },
+          { w: 4000, c: 14, layout: 'none' },
+          { w: 1439, c: 12, layout: 'none' },
+          { w: 1023, c: 8, layout: 'compact' },
+          { w: 599, c: 4, layout: 'list' },
         ],
       },
     }),

From 2c131f396699ee3aff6363506e0be7a7f9ab22c8 Mon Sep 17 00:00:00 2001
From: gkrajniak <gkrajniak@gmail.com>
Date: Wed, 10 Jun 2026 17:07:46 +0200
Subject: [PATCH 4/7] Adjust after review

Signed-off-by: gkrajniak <gkrajniak@gmail.com>
---
 .../dashboard/dashboard/dashboard.component.ts            | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.ts b/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.ts
index 70b0368..a7400ef 100644
--- a/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.ts
+++ b/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.ts
@@ -1,6 +1,6 @@
-import { ButtonSettings } from '../../models/ui-definition';
+import { ButtonSettings } from '../../models';
 import { DashboardCard } from '../card/dashboard-card.component';
-import { addComponentToRegistry } from '../card/utils/dashboard-card-registry';
+import { addComponentToRegistry } from '../card/utils';
 import { DiscardChangesDialog } from '../discard-changes-dialog/discard-changes-dialog.component';
 import { EditCardsDialog } from '../edit-cards-dialog/edit-cards-dialog.component';
 import { CardConfig, DashboardConfig, SectionConfig } from '../models';
@@ -146,8 +146,8 @@ export class Dashboard implements OnInit, OnDestroy {
       marginRight: 0,
       columnOpts: {
         breakpoints: [
-          { w: 4000, c: 14, layout: 'none' },
-          { w: 1439, c: 12, layout: 'none' },
+          { w: 4000, c: 14, layout: 'compact' },
+          { w: 1439, c: 12, layout: 'compact' },
           { w: 1023, c: 8, layout: 'compact' },
           { w: 599, c: 4, layout: 'list' },
         ],

From 3c945f92877e01e3f36d6ba52a9d99ee21b4e4b1 Mon Sep 17 00:00:00 2001
From: gkrajniak <gkrajniak@gmail.com>
Date: Wed, 10 Jun 2026 17:30:35 +0200
Subject: [PATCH 5/7] Adjust after review

Signed-off-by: gkrajniak <gkrajniak@gmail.com>
---
 .../dashboard/card/dashboard-card.component.scss         | 9 +++++++++
 .../dashboard/dashboard/dashboard.component.scss         | 9 +++++++++
 .../dashboard/dashboard/dashboard.component.ts           | 9 +++++++++
 3 files changed, 27 insertions(+)

diff --git a/projects/ngx/declarative-ui/dashboard/card/dashboard-card.component.scss b/projects/ngx/declarative-ui/dashboard/card/dashboard-card.component.scss
index 800d579..4bc8de9 100644
--- a/projects/ngx/declarative-ui/dashboard/card/dashboard-card.component.scss
+++ b/projects/ngx/declarative-ui/dashboard/card/dashboard-card.component.scss
@@ -85,6 +85,15 @@
   z-index: 9;
 }
 
+// In edit mode, this element doubles as Gridstack's resize handle (wired via
+// gridOptions.resizable.element). Pointer events must be enabled so the
+// resize drag can start; the south-east cursor mirrors what Gridstack would
+// otherwise apply on its own .ui-resizable-se handle.
+.component-card--editing .card__resize-indicator {
+  pointer-events: auto;
+  cursor: se-resize;
+}
+
 .card {
   position: relative;
   display: flex;
diff --git a/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.scss b/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.scss
index bc0fb0e..cf8786e 100644
--- a/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.scss
+++ b/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.scss
@@ -157,3 +157,12 @@ mfp-wc-dashboard {
 .grid-stack.grid-stack-dragging * {
   cursor: grabbing !important;
 }
+
+// Suppress the small grey diagonal-arrow SVG Gridstack draws inside its corner
+// resize handles (see node_modules/gridstack/dist/gridstack.min.css — the
+// .ui-resizable-{ne,nw,se,sw} rules embed an inline data: URI). The handle
+// hit area stays interactive; we surface our own .card__resize-indicator
+// inside the card as the edit-mode hint instead.
+.grid-stack-item > .ui-resizable-handle {
+  background-image: none !important;
+}
diff --git a/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.ts b/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.ts
index a7400ef..37298f4 100644
--- a/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.ts
+++ b/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.ts
@@ -144,6 +144,15 @@ export class Dashboard implements OnInit, OnDestroy {
       marginBottom: 0,
       marginLeft: 0,
       marginRight: 0,
+      // Use our own .card__resize-indicator (the blue chevron rendered inside
+      // each card in edit mode) as the resize handle, instead of Gridstack's
+      // generated grey-arrow handle. Documented in DDResizeOpt.element
+      // (gridstack/dist/types.d.ts:376). The element must have pointer-events
+      // enabled for resize-drag to start — see card SCSS where this is set
+      // in edit mode only, so view-mode interactions are unaffected.
+      resizable: {
+        element: '.card__resize-indicator',
+      },
       columnOpts: {
         breakpoints: [
           { w: 4000, c: 14, layout: 'compact' },

From ae29745bdc3fdf3451db276a6793344751034b51 Mon Sep 17 00:00:00 2001
From: gkrajniak <gkrajniak@gmail.com>
Date: Wed, 10 Jun 2026 18:42:45 +0200
Subject: [PATCH 6/7] Adjust after review

Signed-off-by: gkrajniak <gkrajniak@gmail.com>
---
 .../card/dashboard-card.component.html        | 20 +++----
 .../card/dashboard-card.component.scss        | 15 ++---
 .../dashboard/dashboard.component.html        |  1 -
 .../dashboard/dashboard.component.scss        | 23 ++++----
 .../dashboard/dashboard.component.ts          | 20 ++-----
 .../dashboard/models/_breakpoints.scss        | 58 +++++++++++++++++++
 .../dashboard/models/breakpoints.ts           | 37 ++++++++++++
 .../declarative-ui/dashboard/models/index.ts  |  1 +
 .../section/dashboard-section.component.html  |  2 +-
 .../section/dashboard-section.component.scss  | 13 ++---
 .../section/dashboard-section.component.ts    | 23 +++++++-
 11 files changed, 156 insertions(+), 57 deletions(-)
 create mode 100644 projects/ngx/declarative-ui/dashboard/models/_breakpoints.scss
 create mode 100644 projects/ngx/declarative-ui/dashboard/models/breakpoints.ts

diff --git a/projects/ngx/declarative-ui/dashboard/card/dashboard-card.component.html b/projects/ngx/declarative-ui/dashboard/card/dashboard-card.component.html
index ffd7bed..ec26d5b 100644
--- a/projects/ngx/declarative-ui/dashboard/card/dashboard-card.component.html
+++ b/projects/ngx/declarative-ui/dashboard/card/dashboard-card.component.html
@@ -6,24 +6,24 @@
           class="card__remove"
           design="Default"
           icon="decline"
-          [accessibleName]="'Remove card: ' + (card().label || card().component)"
+          [accessibleName]="
+            'Remove card: ' + (card().label || card().component)
+          "
           (click)="removeCard.emit()"
         />
       </div>
+      <ui5-icon
+        class="card__resize-indicator"
+        name="resize-corner"
+        accessible-name="Resizable"
+        aria-hidden="true"
+      />
     }
     <div
       class="component-host"
       [style.pointer-events]="editMode() ? 'none' : 'auto'"
     >
       <div #elementHost></div>
-      @if (editMode()) {
-        <ui5-icon
-          class="card__resize-indicator"
-          name="resize-corner"
-          accessible-name="Resizable"
-          aria-hidden="true"
-        />
-      }
     </div>
   </div>
 } @else {
@@ -35,4 +35,4 @@
       <ng-content />
     </div>
   </div>
-}
\ No newline at end of file
+}
diff --git a/projects/ngx/declarative-ui/dashboard/card/dashboard-card.component.scss b/projects/ngx/declarative-ui/dashboard/card/dashboard-card.component.scss
index 4bc8de9..640b50d 100644
--- a/projects/ngx/declarative-ui/dashboard/card/dashboard-card.component.scss
+++ b/projects/ngx/declarative-ui/dashboard/card/dashboard-card.component.scss
@@ -74,7 +74,11 @@
 
 .card__resize-indicator {
   position: absolute;
-  right: 4px;
+  // Anchored to the .component-card edges. The card has horizontal padding
+  // (--mfp_cardContainerPadding, default 10px), so we pull the chevron back
+  // by that much to land inside the visible card surface rather than the
+  // padding gutter.
+  right: calc(var(--mfp_cardContainerPadding, 10px) + 4px);
   bottom: 4px;
   width: 1rem;
   height: 1rem;
@@ -85,15 +89,6 @@
   z-index: 9;
 }
 
-// In edit mode, this element doubles as Gridstack's resize handle (wired via
-// gridOptions.resizable.element). Pointer events must be enabled so the
-// resize drag can start; the south-east cursor mirrors what Gridstack would
-// otherwise apply on its own .ui-resizable-se handle.
-.component-card--editing .card__resize-indicator {
-  pointer-events: auto;
-  cursor: se-resize;
-}
-
 .card {
   position: relative;
   display: flex;
diff --git a/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.html b/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.html
index 2ded5e1..4f15e3b 100644
--- a/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.html
+++ b/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.html
@@ -145,7 +145,6 @@
     @for (section of sections(); track section.id) {
       <mfp-dashboard-section
         [cards]="sectionCards()(section.id)"
-        [columns]="12"
         [editMode]="editMode()"
         [section]="section"
         (removeCard)="removeCard($event)"
diff --git a/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.scss b/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.scss
index cf8786e..ddf9553 100644
--- a/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.scss
+++ b/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.scss
@@ -1,3 +1,4 @@
+@use '../models/breakpoints' as bp;
 @import 'gridstack/dist/gridstack.min.css';
 
 mfp-dashboard,
@@ -16,22 +17,24 @@ mfp-wc-dashboard {
 
 .mfp-dashboard {
   padding: calc(var(--sapShell_Space_XL, 3rem) - 10px);
+  // Acts as the inline-size query container for everything below. The
+  // `.mfp-sections-container` grid then reacts to *this element's* width
+  // instead of the viewport, which matches Gridstack (whose breakpoints also
+  // measure the grid element by default — see DashboardConfig.allowedWidths
+  // discussion / GridStackOptions.columnOpts.breakpointForWindow).
+  container-type: inline-size;
+  container-name: mfp-dashboard;
 }
 
 .mfp-sections-container {
   display: grid;
-  grid-template-columns: repeat(12, 1fr);
   grid-auto-rows: auto;
   align-content: start;
   gap: 1rem;
 
-  @media (max-width: 726px) {
-    grid-template-columns: 1fr;
-  }
-
-  @media (min-width: 727px) and (max-width: 1200px) {
-    grid-template-columns: repeat(8, 1fr);
-  }
+  // Column track count comes from ../models/_breakpoints.scss — same source
+  // of truth used by .section__grid below and by Gridstack's columnOpts.
+  @include bp.dashboard-grid-columns;
 }
 
 .mfp-dashboard__topbar {
@@ -50,7 +53,7 @@ mfp-wc-dashboard {
   align-items: flex-start;
   justify-content: space-between;
   gap: 1rem;
-  padding: 0px 10px;
+  padding: 0 10px;
 }
 
 .mfp-dashboard__header {
@@ -123,7 +126,7 @@ mfp-wc-dashboard {
   padding: 7px 16px;
   background: var(--sapPageFooter_Background, white);
   border-radius: var(--sapElement_BorderCornerRadius, 12px);
-  box-shadow: 0px 0px 0px 1px rgba(34, 53, 72, 0.48), 0px 2px 8px 0px rgba(34, 53, 72, 0.3);
+  box-shadow: 0 0 0 1px rgba(34, 53, 72, 0.48), 0 2px 8px 0 rgba(34, 53, 72, 0.3);
   box-sizing: border-box;
   overflow: hidden;
 }
diff --git a/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.ts b/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.ts
index 37298f4..da6792f 100644
--- a/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.ts
+++ b/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.ts
@@ -4,6 +4,7 @@ import { addComponentToRegistry } from '../card/utils';
 import { DiscardChangesDialog } from '../discard-changes-dialog/discard-changes-dialog.component';
 import { EditCardsDialog } from '../edit-cards-dialog/edit-cards-dialog.component';
 import { CardConfig, DashboardConfig, SectionConfig } from '../models';
+import { DASHBOARD_BREAKPOINTS } from '../models';
 import { CELL_HEIGHT, COMPACT_BREAKPOINT } from '../models/constants';
 import { DashboardSection } from '../section/dashboard-section.component';
 import { UnsavedChangesDialog } from '../unsaved-changes-dialog/unsaved-changes-dialog.component';
@@ -139,27 +140,16 @@ export class Dashboard implements OnInit, OnDestroy {
   protected gridOptions = computed(
     (): GridStackOptions => ({
       cellHeight: CELL_HEIGHT,
+      sizeToContent: true,
       disableResize: !this.editMode(),
       disableDrag: !this.editMode(),
       marginBottom: 0,
       marginLeft: 0,
       marginRight: 0,
-      // Use our own .card__resize-indicator (the blue chevron rendered inside
-      // each card in edit mode) as the resize handle, instead of Gridstack's
-      // generated grey-arrow handle. Documented in DDResizeOpt.element
-      // (gridstack/dist/types.d.ts:376). The element must have pointer-events
-      // enabled for resize-drag to start — see card SCSS where this is set
-      // in edit mode only, so view-mode interactions are unaffected.
-      resizable: {
-        element: '.card__resize-indicator',
-      },
       columnOpts: {
-        breakpoints: [
-          { w: 4000, c: 14, layout: 'compact' },
-          { w: 1439, c: 12, layout: 'compact' },
-          { w: 1023, c: 8, layout: 'compact' },
-          { w: 599, c: 4, layout: 'list' },
-        ],
+        // Source of truth: ../models/breakpoints.ts (paired with
+        // ../models/_breakpoints.scss for the section grid's container queries).
+        breakpoints: [...DASHBOARD_BREAKPOINTS],
       },
     }),
   );
diff --git a/projects/ngx/declarative-ui/dashboard/models/_breakpoints.scss b/projects/ngx/declarative-ui/dashboard/models/_breakpoints.scss
new file mode 100644
index 0000000..0ac2159
--- /dev/null
+++ b/projects/ngx/declarative-ui/dashboard/models/_breakpoints.scss
@@ -0,0 +1,58 @@
+// ─────────────────────────────────────────────────────────────────────────────
+// MUST MATCH: ./breakpoints.ts
+//
+// SCSS half of the shared dashboard breakpoint table. Consumed by
+// dashboard.component.scss for @container queries on .mfp-sections-container.
+// Keep these values identical to DASHBOARD_BREAKPOINTS in breakpoints.ts.
+// ─────────────────────────────────────────────────────────────────────────────
+
+// Each breakpoint's max-width (in px) and the corresponding column count
+// applied at that breakpoint. Ordered ascending by `w` so it's easy to read
+// off as a series of (max-width, columns) pairs.
+$dashboard-breakpoints: (
+  (599, 4),
+  (1023, 8),
+  (1439, 12),
+  // Above 1439: 14 columns. Implemented as the default (no @container rule);
+  // the 4000 ceiling exists in the TS table for Gridstack's benefit only.
+);
+
+/// Convenience accessors for the four breakpoint widths used by the grid.
+$dashboard-bp-sm: 599px;
+$dashboard-bp-md: 1023px;
+$dashboard-bp-lg: 1439px;
+
+/// Column counts at each breakpoint.
+$dashboard-cols-sm: 4;
+$dashboard-cols-md: 8;
+$dashboard-cols-lg: 12;
+$dashboard-cols-xl: 14;
+
+/// Emit `grid-template-columns: repeat(N, 1fr)` rules wrapped in @container
+/// queries against the `mfp-dashboard` named container. Every dashboard grid
+/// (the section-laying-out one and each section's card-laying-out one) calls
+/// this so the column counts stay aligned.
+///
+/// `$override` lets a caller substitute a CSS variable in front of each value
+/// (used by .section__grid to honour an explicit `--cols` override before
+/// falling back to the responsive default).
+@mixin dashboard-grid-columns($override: null) {
+  $sm: if($override, var($override, #{$dashboard-cols-sm}), $dashboard-cols-sm);
+  $md: if($override, var($override, #{$dashboard-cols-md}), $dashboard-cols-md);
+  $lg: if($override, var($override, #{$dashboard-cols-lg}), $dashboard-cols-lg);
+  $xl: if($override, var($override, #{$dashboard-cols-xl}), $dashboard-cols-xl);
+
+  grid-template-columns: repeat(#{$xl}, 1fr);
+
+  @container mfp-dashboard (max-width: #{$dashboard-bp-sm}) {
+    grid-template-columns: repeat(#{$sm}, 1fr);
+  }
+
+  @container mfp-dashboard (min-width: #{$dashboard-bp-sm + 1px}) and (max-width: #{$dashboard-bp-md}) {
+    grid-template-columns: repeat(#{$md}, 1fr);
+  }
+
+  @container mfp-dashboard (min-width: #{$dashboard-bp-md + 1px}) and (max-width: #{$dashboard-bp-lg}) {
+    grid-template-columns: repeat(#{$lg}, 1fr);
+  }
+}
diff --git a/projects/ngx/declarative-ui/dashboard/models/breakpoints.ts b/projects/ngx/declarative-ui/dashboard/models/breakpoints.ts
new file mode 100644
index 0000000..728f6f8
--- /dev/null
+++ b/projects/ngx/declarative-ui/dashboard/models/breakpoints.ts
@@ -0,0 +1,37 @@
+// ─────────────────────────────────────────────────────────────────────────────
+// MUST MATCH: ./_breakpoints.scss
+//
+// These breakpoints are consumed by two systems that can't share a single
+// source of truth at compile time:
+//
+//   1. dashboard.component.ts — passed to Gridstack as
+//      `gridOptions.columnOpts.breakpoints`. Gridstack picks the active
+//      breakpoint by `w` (max-width). At each breakpoint, every grid item is
+//      laid out using `c` columns.
+//
+//   2. dashboard.component.scss — used in a `@container` query so the
+//      `.mfp-sections-container` CSS grid mirrors the same column count as
+//      Gridstack at the same width.
+//
+// If you change either set of values, change BOTH files in the same commit.
+// The two are kept in sync by hand (no codegen). A SCSS-from-TS generator
+// would remove this hazard but is out of scope here.
+// ─────────────────────────────────────────────────────────────────────────────
+
+import type { Breakpoint } from 'gridstack';
+
+/**
+ * Layout strategy applied at each breakpoint when Gridstack changes column
+ * count. See ColumnOptions in gridstack/dist/types.d.ts:27 for the full set.
+ */
+type LayoutStrategy = 'compact' | 'list' | 'none';
+
+/** Single source of truth for grid + section breakpoints (TypeScript half). */
+export const DASHBOARD_BREAKPOINTS: ReadonlyArray<
+  Readonly<Required<Pick<Breakpoint, 'w' | 'c'>> & { layout: LayoutStrategy }>
+> = [
+  { w: 4000, c: 14, layout: 'compact' },
+  { w: 1439, c: 12, layout: 'compact' },
+  { w: 1023, c: 8, layout: 'compact' },
+  { w: 599, c: 4, layout: 'list' },
+] as const;
diff --git a/projects/ngx/declarative-ui/dashboard/models/index.ts b/projects/ngx/declarative-ui/dashboard/models/index.ts
index 1866903..0e26c12 100644
--- a/projects/ngx/declarative-ui/dashboard/models/index.ts
+++ b/projects/ngx/declarative-ui/dashboard/models/index.ts
@@ -1 +1,2 @@
 export * from './dashboard.model';
+export * from './breakpoints';
diff --git a/projects/ngx/declarative-ui/dashboard/section/dashboard-section.component.html b/projects/ngx/declarative-ui/dashboard/section/dashboard-section.component.html
index 2ecc55f..168ee42 100644
--- a/projects/ngx/declarative-ui/dashboard/section/dashboard-section.component.html
+++ b/projects/ngx/declarative-ui/dashboard/section/dashboard-section.component.html
@@ -16,7 +16,7 @@
       <span class="section__title">{{ section().title }}</span>
     </div>
   }
-  <div class="section__grid" [style.--cols]="columns()">
+  <div class="section__grid" [style.--cols]="columns() ?? null">
     @for (card of cards(); track card.id) {
       <mfp-dashboard-card
         [card]="card"
diff --git a/projects/ngx/declarative-ui/dashboard/section/dashboard-section.component.scss b/projects/ngx/declarative-ui/dashboard/section/dashboard-section.component.scss
index 55f0658..252b7ec 100644
--- a/projects/ngx/declarative-ui/dashboard/section/dashboard-section.component.scss
+++ b/projects/ngx/declarative-ui/dashboard/section/dashboard-section.component.scss
@@ -1,3 +1,5 @@
+@use '../models/breakpoints' as bp;
+
 :host {
   display: block;
   min-width: 0;
@@ -71,17 +73,12 @@
 
   &__grid {
     display: grid;
-    grid-template-columns: repeat(var(--cols, 12), 1fr);
     grid-auto-rows: var(--row-height, 10px);
     column-gap: var(--column-gap, 0px);
     row-gap: var(--row-gap, 0px);
 
-    @media (max-width: 599px) {
-      grid-template-columns: 1fr;
-    }
-
-    @media (min-width: 600px) and (max-width: 1023px) {
-      grid-template-columns: repeat(8, 1fr);
-    }
+    // Same column-track configuration as .mfp-sections-container, with `--cols`
+    // honoured as a per-section override before the responsive defaults kick in.
+    @include bp.dashboard-grid-columns($override: --cols);
   }
 }
diff --git a/projects/ngx/declarative-ui/dashboard/section/dashboard-section.component.ts b/projects/ngx/declarative-ui/dashboard/section/dashboard-section.component.ts
index cc55ec2..ab579c0 100644
--- a/projects/ngx/declarative-ui/dashboard/section/dashboard-section.component.ts
+++ b/projects/ngx/declarative-ui/dashboard/section/dashboard-section.component.ts
@@ -10,13 +10,32 @@ import { Button } from '@fundamental-ngx/ui5-webcomponents/button';
   styleUrl: './dashboard-section.component.scss',
   encapsulation: ViewEncapsulation.Emulated,
   host: {
-    '[style.grid-column]': '"span " + (section().w ?? 12)',
+    // Section width interpretation:
+    //   - `section.w` undefined OR equal to the active outer grid's column
+    //     count (12) → span the full outer row (`1 / -1`). This is what the
+    //     consumer means by "full-width section": fill whatever the dashboard
+    //     is showing right now (4 / 8 / 12 / 14 columns at sm/md/lg/xl).
+    //   - any other explicit `w` → span exactly that many outer columns.
+    //
+    // Without `1 / -1`, a `w: 12` section in an xl grid (14 cols) would only
+    // cover 12 of 14 columns, leaving a dead 2-col gutter on the right and
+    // squeezing the cards inside it relative to the outer grid's units.
+    '[style.grid-column]':
+      'section().w === undefined || section().w === 12 ? "1 / -1" : "span " + section().w',
   },
 })
 export class DashboardSection {
   section = input.required<SectionConfig>();
   cards = input<CardConfig[]>([]);
-  columns = input<number>(12);
+  /**
+   * Optional override for the section's inner grid column count. Leave unset
+   * (the default) to inherit the responsive defaults from CSS — the section
+   * grid then mirrors the dashboard breakpoints (4/8/12/14 columns) via the
+   * `mfp-dashboard` container query in dashboard-section.component.scss.
+   * Pass an explicit number only when a section needs a fixed column count
+   * regardless of width.
+   */
+  columns = input<number | undefined>(undefined);
   editMode = input<boolean>(false);
   readonly removeSection = output<void>();
   readonly removeCard = output<string>();

From 5cf1778e0b4249fa740a38d4142fed45c43bdb01 Mon Sep 17 00:00:00 2001
From: gkrajniak <gkrajniak@gmail.com>
Date: Thu, 11 Jun 2026 10:54:50 +0200
Subject: [PATCH 7/7] Adjust after review

Signed-off-by: gkrajniak <gkrajniak@gmail.com>
---
 .../dashboard/dashboard/dashboard.component.ts            | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.ts b/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.ts
index da6792f..b61d753 100644
--- a/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.ts
+++ b/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.ts
@@ -3,8 +3,12 @@ import { DashboardCard } from '../card/dashboard-card.component';
 import { addComponentToRegistry } from '../card/utils';
 import { DiscardChangesDialog } from '../discard-changes-dialog/discard-changes-dialog.component';
 import { EditCardsDialog } from '../edit-cards-dialog/edit-cards-dialog.component';
-import { CardConfig, DashboardConfig, SectionConfig } from '../models';
-import { DASHBOARD_BREAKPOINTS } from '../models';
+import {
+  CardConfig,
+  DASHBOARD_BREAKPOINTS,
+  DashboardConfig,
+  SectionConfig,
+} from '../models';
 import { CELL_HEIGHT, COMPACT_BREAKPOINT } from '../models/constants';
 import { DashboardSection } from '../section/dashboard-section.component';
 import { UnsavedChangesDialog } from '../unsaved-changes-dialog/unsaved-changes-dialog.component';