From cc0376f97201937c0cd323e64d7b89ca80fe8f1d Mon Sep 17 00:00:00 2001
From: German Jablonski <GermanJablo@users.noreply.github.com>
Date: Tue, 19 May 2026 17:06:01 +0100
Subject: [PATCH 1/3] style: enhance ModularDashboard widget styles and update
 Private component colors

Added padding to the widget and adjusted alignment for card content in the ModularDashboard. Updated background and text colors in the Private component to align with the new design specifications.
---
 .../views/Dashboard/Default/ModularDashboard/index.css    | 8 ++++++++
 test/dashboard/components/Private.tsx                     | 4 ++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/next/src/views/Dashboard/Default/ModularDashboard/index.css b/packages/next/src/views/Dashboard/Default/ModularDashboard/index.css
index 095eeeff37d..e3bb6d56b93 100644
--- a/packages/next/src/views/Dashboard/Default/ModularDashboard/index.css
+++ b/packages/next/src/views/Dashboard/Default/ModularDashboard/index.css
@@ -1,4 +1,12 @@
 @layer payload-default {
+  .modular-dashboard .widget {
+    padding: calc(var(--spacer-2-5) / 2);
+  }
+
+  .modular-dashboard .widget-content > .card {
+    align-items: stretch;
+  }
+
   .modular-dashboard .widget-content {
     height: 100%;
   }
diff --git a/test/dashboard/components/Private.tsx b/test/dashboard/components/Private.tsx
index 71118de5a09..a6c6dbfcf11 100644
--- a/test/dashboard/components/Private.tsx
+++ b/test/dashboard/components/Private.tsx
@@ -24,9 +24,9 @@ export default function Private({ widgetSlug }: WidgetServerProps) {
         <h3 style={{ fontSize: '16px', fontWeight: 600, margin: 0 }}>Private Widget</h3>
         <div
           style={{
-            background: 'var(--theme-success-500)',
+            background: 'var(--color-bg-brand)',
             borderRadius: '12px',
-            color: 'var(--theme-elevation-0)',
+            color: 'var(--color-text-onbrand)',
             fontSize: '12px',
             fontWeight: 600,
             padding: '4px 8px',

From a8d56c57e1ee9db80f8609577b7522af0d08ebd5 Mon Sep 17 00:00:00 2001
From: German Jablonski <GermanJablo@users.noreply.github.com>
Date: Tue, 19 May 2026 17:38:21 +0100
Subject: [PATCH 2/3] fix(ui): restore default align-items stretch on Card

Move the align-items override from the dashboard scope to the global
.card element. The Card React component is only used internally by
CollectionCards, which is the only widget that renders into the
modular dashboard, so scoping the fix to .modular-dashboard was
functionally equivalent today but would silently regress for any
third-party consumer of the exported <Card> component, which is part
of the public API.
---
 .../src/views/Dashboard/Default/ModularDashboard/index.css    | 4 ----
 packages/ui/src/elements/Card/index.css                       | 2 +-
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/next/src/views/Dashboard/Default/ModularDashboard/index.css b/packages/next/src/views/Dashboard/Default/ModularDashboard/index.css
index e3bb6d56b93..d8ba38bf798 100644
--- a/packages/next/src/views/Dashboard/Default/ModularDashboard/index.css
+++ b/packages/next/src/views/Dashboard/Default/ModularDashboard/index.css
@@ -3,10 +3,6 @@
     padding: calc(var(--spacer-2-5) / 2);
   }
 
-  .modular-dashboard .widget-content > .card {
-    align-items: stretch;
-  }
-
   .modular-dashboard .widget-content {
     height: 100%;
   }
diff --git a/packages/ui/src/elements/Card/index.css b/packages/ui/src/elements/Card/index.css
index 19515b8891c..36a9df727a6 100644
--- a/packages/ui/src/elements/Card/index.css
+++ b/packages/ui/src/elements/Card/index.css
@@ -8,7 +8,7 @@
     border-radius: var(--radius-medium);
     border: var(--stroke-width-small) solid var(--color-border);
     display: flex;
-    align-items: flex-start;
+    align-items: stretch;
     gap: var(--spacer-2);
   }
 

From 5c6970e615c11f00bc4bb7b86f4d2b4b465a5659 Mon Sep 17 00:00:00 2001
From: German Jablonski <GermanJablo@users.noreply.github.com>
Date: Wed, 20 May 2026 10:28:21 +0100
Subject: [PATCH 3/3] fix(next): align modular dashboard content with page
 gutter

---
 .../src/views/Dashboard/Default/ModularDashboard/index.css   | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/next/src/views/Dashboard/Default/ModularDashboard/index.css b/packages/next/src/views/Dashboard/Default/ModularDashboard/index.css
index d8ba38bf798..64b255625df 100644
--- a/packages/next/src/views/Dashboard/Default/ModularDashboard/index.css
+++ b/packages/next/src/views/Dashboard/Default/ModularDashboard/index.css
@@ -1,4 +1,9 @@
 @layer payload-default {
+  .modular-dashboard {
+    margin: calc(var(--spacer-2-5) / -2);
+    width: calc(100% + var(--spacer-2-5));
+  }
+
   .modular-dashboard .widget {
     padding: calc(var(--spacer-2-5) / 2);
   }