From 12f14762b9fc2823ed1c59bd79dacb8915f627c5 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Mon, 30 Sep 2024 13:36:15 -0700
Subject: [PATCH] feat(panel): improve panel header layout (#10446)

**Related Issue:** #10385

## Summary

Slotted content will now adjust its size and position to allow more
flexible layouts, similar to how content behaves in `modal`.
---
 .../src/components/dialog/dialog.stories.ts           | 11 ++++++++++-
 .../src/components/panel/panel.scss                   |  1 +
 2 files changed, 11 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>
 `;
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);
 }