From 241d856546d8f2174310492ce8e0f86119d4d5cd Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Wed, 24 Jul 2024 10:19:53 -0700
Subject: [PATCH 1/2] fix(shell): fix resizing a slotted shell-panel when
 clicking to resize. #9807

---
 .../src/components/shell/shell.scss              | 16 ++++++----------
 .../src/components/shell/shell.tsx               | 11 +++++------
 2 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/packages/calcite-components/src/components/shell/shell.scss b/packages/calcite-components/src/components/shell/shell.scss
index ea0d9e94f92..9d16e107515 100755
--- a/packages/calcite-components/src/components/shell/shell.scss
+++ b/packages/calcite-components/src/components/shell/shell.scss
@@ -29,18 +29,18 @@
     overflow-hidden;
 }
 
-.content,
-.content--non-interactive {
+.content {
   @apply flex
     h-full
     w-full
     flex-col
-    flex-nowrap;
+    flex-nowrap
+    overflow-auto;
+  justify-content: space-between;
 }
 
-.content {
-  @apply overflow-auto;
-  justify-content: space-between;
+.content--non-interactive {
+  @apply flex pointer-events-none;
 }
 
 .content ::slotted(calcite-shell-center-row),
@@ -58,10 +58,6 @@
   display: initial;
 }
 
-.content--non-interactive {
-  @apply pointer-events-none;
-}
-
 ::slotted(calcite-shell-center-row) {
   inline-size: unset;
 }
diff --git a/packages/calcite-components/src/components/shell/shell.tsx b/packages/calcite-components/src/components/shell/shell.tsx
index 51fdcf7b0d7..b41ad84eca7 100755
--- a/packages/calcite-components/src/components/shell/shell.tsx
+++ b/packages/calcite-components/src/components/shell/shell.tsx
@@ -198,13 +198,12 @@ export class Shell implements ConditionalSlotComponent {
   }
 
   renderContent(): VNode[] {
-    const { panelIsResizing } = this;
-    const defaultSlotNode: VNode = <slot key="default-slot" />;
-    const defaultSlotContainerNode = panelIsResizing ? (
-      <div class={CSS.contentNonInteractive}>{defaultSlotNode}</div>
-    ) : (
-      defaultSlotNode
+    const defaultSlotContainerNode = (
+      <div class={{ [CSS.contentNonInteractive]: this.panelIsResizing }}>
+        <slot key="default-slot" />
+      </div>
     );
+
     const deprecatedCenterRowSlotNode: VNode = (
       <slot key="center-row-slot" name={SLOTS.centerRow} />
     );

From 2354df45e3d9a8fe4e797bb1a686f42e0c7c49a8 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Wed, 24 Jul 2024 11:28:17 -0700
Subject: [PATCH 2/2] cleanup

---
 .../src/components/shell/shell.scss                   |  8 ++++----
 .../calcite-components/src/components/shell/shell.tsx | 11 ++++++-----
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/calcite-components/src/components/shell/shell.scss b/packages/calcite-components/src/components/shell/shell.scss
index 9d16e107515..0a89cfbdd05 100755
--- a/packages/calcite-components/src/components/shell/shell.scss
+++ b/packages/calcite-components/src/components/shell/shell.scss
@@ -39,10 +39,6 @@
   justify-content: space-between;
 }
 
-.content--non-interactive {
-  @apply flex pointer-events-none;
-}
-
 .content ::slotted(calcite-shell-center-row),
 .content ::slotted(calcite-panel),
 .content ::slotted(calcite-flow) {
@@ -58,6 +54,10 @@
   display: initial;
 }
 
+.content--non-interactive {
+  @apply flex pointer-events-none;
+}
+
 ::slotted(calcite-shell-center-row) {
   inline-size: unset;
 }
diff --git a/packages/calcite-components/src/components/shell/shell.tsx b/packages/calcite-components/src/components/shell/shell.tsx
index b41ad84eca7..51fdcf7b0d7 100755
--- a/packages/calcite-components/src/components/shell/shell.tsx
+++ b/packages/calcite-components/src/components/shell/shell.tsx
@@ -198,12 +198,13 @@ export class Shell implements ConditionalSlotComponent {
   }
 
   renderContent(): VNode[] {
-    const defaultSlotContainerNode = (
-      <div class={{ [CSS.contentNonInteractive]: this.panelIsResizing }}>
-        <slot key="default-slot" />
-      </div>
+    const { panelIsResizing } = this;
+    const defaultSlotNode: VNode = <slot key="default-slot" />;
+    const defaultSlotContainerNode = panelIsResizing ? (
+      <div class={CSS.contentNonInteractive}>{defaultSlotNode}</div>
+    ) : (
+      defaultSlotNode
     );
-
     const deprecatedCenterRowSlotNode: VNode = (
       <slot key="center-row-slot" name={SLOTS.centerRow} />
     );