diff --git a/packages/calcite-components/src/components/dialog/dialog.stories.ts b/packages/calcite-components/src/components/dialog/dialog.stories.ts
index c829ea2fea0..9a0ba8d918d 100644
--- a/packages/calcite-components/src/components/dialog/dialog.stories.ts
+++ b/packages/calcite-components/src/components/dialog/dialog.stories.ts
@@ -210,8 +210,17 @@ withTooltips.parameters = {
 };
 
 export const withCustomHeader = (): string => html`
+  <style>
+    #three-quarters-width-header-content {
+      width: 75%;
+    }
+  </style>
   <calcite-dialog open scale="m" width-scale="s">
-    <div slot="${SLOTS.headerContent}">Header!</div>
+    <div id="three-quarters-width-header-content" slot="${SLOTS.headerContent}">
+      <calcite-inline-editable scale="l" editingEnabled="true">
+        <calcite-input alignment="start" placeholder="Enter text..." scale="l" type="text" value="Editable header" />
+      </calcite-inline-editable>
+    </div>
     <p>Slotted content!</p>
   </calcite-dialog>
 `;
diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss
index 2838acacdf2..4d40f90da8c 100644
--- a/packages/calcite-components/src/components/panel/panel.scss
+++ b/packages/calcite-components/src/components/panel/panel.scss
@@ -180,6 +180,7 @@
 }
 
 .header-content {
+  flex: 1 1 auto;
   padding-block: var(--calcite-internal-panel-header-vertical-padding);
   padding-inline: var(--calcite-internal-panel-default-padding);
 }