From 221aab83e3d07dad26370f6663db50bdac1ca707 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Mon, 30 Sep 2024 10:44:20 -0700
Subject: [PATCH 1/2] feat(panel): improve panel header layout

---
 packages/calcite-components/src/components/panel/panel.scss | 1 +
 1 file changed, 1 insertion(+)

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);
 }

From d59b7e344d423a51b351aa0c76d60b422cdc42f1 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Mon, 30 Sep 2024 11:13:36 -0700
Subject: [PATCH 2/2] add screenshot test coverage

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

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>
 `;