From ece1fb448099c46b58b15e5d376326d266afaa7c Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Wed, 1 Oct 2025 16:14:59 -0700
Subject: [PATCH 1/3] fix(panel, dialog): Calcite dialog header fails to wrap
 for the longer text #12964

---
 .../src/components/dialog/dialog.stories.ts           | 11 +++++++++++
 .../src/components/panel/panel.scss                   |  1 +
 2 files changed, 12 insertions(+)

diff --git a/packages/calcite-components/src/components/dialog/dialog.stories.ts b/packages/calcite-components/src/components/dialog/dialog.stories.ts
index 152800b4403..2558ea257ab 100644
--- a/packages/calcite-components/src/components/dialog/dialog.stories.ts
+++ b/packages/calcite-components/src/components/dialog/dialog.stories.ts
@@ -515,6 +515,17 @@ export const withShellInside = (): string =>
     <calcite-button slot="footer-end"> Save </calcite-button>
   </calcite-dialog>`;
 
+export const withWrappingHeaderText = (): string =>
+  html`<calcite-dialog
+    style="--calcite-dialog-max-size-x: 100px"
+    scale="s"
+    open
+    heading="Thisisthesongthatneverends...itkeeps goingonnd on my friends...."
+    description="Heyyy"
+  >
+    Dialog Content
+  </calcite-dialog>`;
+
 export const themed = (): string =>
   html`<calcite-dialog
     style="${themedStyle}"
diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss
index 5e7dd00b13f..5e501d85295 100644
--- a/packages/calcite-components/src/components/panel/panel.scss
+++ b/packages/calcite-components/src/components/panel/panel.scss
@@ -167,6 +167,7 @@ slot[name="alerts"]::slotted(calcite-alert) {
 
   .heading-text-content {
     flex: 1 1 auto;
+    overflow: hidden;
   }
 
   .heading,

From b63b8ba63d24421a302a2f3526ce7e5525614345 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Wed, 1 Oct 2025 16:33:04 -0700
Subject: [PATCH 2/3] update story

---
 .../src/components/dialog/dialog.stories.ts        | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/calcite-components/src/components/dialog/dialog.stories.ts b/packages/calcite-components/src/components/dialog/dialog.stories.ts
index 2558ea257ab..3995cb53410 100644
--- a/packages/calcite-components/src/components/dialog/dialog.stories.ts
+++ b/packages/calcite-components/src/components/dialog/dialog.stories.ts
@@ -526,6 +526,20 @@ export const withWrappingHeaderText = (): string =>
     Dialog Content
   </calcite-dialog>`;
 
+withWrappingHeaderText.parameters = {
+  chromatic: {
+    modes: {
+      specific: {
+        viewport: {
+          width: 1200,
+          height: 1200,
+        },
+      },
+    },
+    cropToViewport: true,
+  },
+};
+
 export const themed = (): string =>
   html`<calcite-dialog
     style="${themedStyle}"

From d84504e6fc9d0648ab7d8d74075802eaadc49dd8 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Wed, 1 Oct 2025 17:04:29 -0700
Subject: [PATCH 3/3] add delay

---
 .../calcite-components/src/components/dialog/dialog.stories.ts   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/calcite-components/src/components/dialog/dialog.stories.ts b/packages/calcite-components/src/components/dialog/dialog.stories.ts
index 3995cb53410..6a1b927b26f 100644
--- a/packages/calcite-components/src/components/dialog/dialog.stories.ts
+++ b/packages/calcite-components/src/components/dialog/dialog.stories.ts
@@ -528,6 +528,7 @@ export const withWrappingHeaderText = (): string =>
 
 withWrappingHeaderText.parameters = {
   chromatic: {
+    delay: 1000,
     modes: {
       specific: {
         viewport: {