diff --git a/packages/calcite-components/src/components/dialog/dialog.stories.ts b/packages/calcite-components/src/components/dialog/dialog.stories.ts
index 152800b4403..6a1b927b26f 100644
--- a/packages/calcite-components/src/components/dialog/dialog.stories.ts
+++ b/packages/calcite-components/src/components/dialog/dialog.stories.ts
@@ -515,6 +515,32 @@ 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>`;
+
+withWrappingHeaderText.parameters = {
+  chromatic: {
+    delay: 1000,
+    modes: {
+      specific: {
+        viewport: {
+          width: 1200,
+          height: 1200,
+        },
+      },
+    },
+    cropToViewport: true,
+  },
+};
+
 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,