From 90e93681c6926eec8480c4028f2797046ebd54f4 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Thu, 1 Aug 2024 14:46:23 -0700
Subject: [PATCH] fix(panel, flow-item): fix header padding regression (#9936)

**Related Issue:** #9921

## Summary

Fix unintentional header padding adjustment for medium/default scale.
---
 .../src/components/panel/panel.scss                   | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss
index 8ef2ffad730..7a8032a1a8a 100644
--- a/packages/calcite-components/src/components/panel/panel.scss
+++ b/packages/calcite-components/src/components/panel/panel.scss
@@ -20,6 +20,7 @@
 
 :host([scale="s"]) {
   --calcite-internal-panel-default-padding: var(--calcite-spacing-sm);
+  --calcite-internal-panel-header-vertical-padding: 10px; // this should use a spacing token once made available
 
   .header-content {
     .heading {
@@ -34,6 +35,7 @@
 
 :host([scale="m"]) {
   --calcite-internal-panel-default-padding: var(--calcite-spacing-md);
+  --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-lg);
 
   .header-content {
     .heading {
@@ -48,6 +50,7 @@
 
 :host([scale="l"]) {
   --calcite-internal-panel-default-padding: var(--calcite-spacing-xl);
+  --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-xxl);
 
   .header-content {
     .heading {
@@ -163,11 +166,15 @@
 }
 
 .content-top,
-.content-bottom,
-.header-content {
+.content-bottom {
   padding: var(--calcite-internal-panel-default-padding);
 }
 
+.header-content {
+  padding-block: var(--calcite-internal-panel-header-vertical-padding);
+  padding-inline: var(--calcite-internal-panel-default-padding);
+}
+
 .footer {
   @apply flex mt-auto flex-row content-between justify-center items-center bg-foreground-1 text-n2-wrap;
   border-block-start: 1px solid var(--calcite-color-border-3);