From e6d895fbd5cc5d0cfe8c7e443a1568861c22e8e4 Mon Sep 17 00:00:00 2001
From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com>
Date: Mon, 25 Nov 2024 14:01:20 +0530
Subject: [PATCH] fix(side panel in react): slideIn not working as expected

---
 .../components/SidePanel/SidePanel.stories.jsx |  8 ++++----
 .../SidePanel/_storybook-styles.scss           | 18 ++++++++++++++++++
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/packages/ibm-products/src/components/SidePanel/SidePanel.stories.jsx b/packages/ibm-products/src/components/SidePanel/SidePanel.stories.jsx
index 133e338697..596ff1d105 100644
--- a/packages/ibm-products/src/components/SidePanel/SidePanel.stories.jsx
+++ b/packages/ibm-products/src/components/SidePanel/SidePanel.stories.jsx
@@ -596,8 +596,8 @@ const SlideInTemplate = ({ actions, aiLabel, slug, ...args }) => {
 
   return (
     <>
-      <Grid id="ibm-products-page-content" className={`${prefix}grid`}>
-        <Column lg={16} md={8} sm={4}>
+      <div class={`${prefix}story-container`}>
+        <div class={`${prefix}story-content`} id="ibm-products-page-content">
           <Button
             ref={buttonRef}
             onClick={() => setOpen(!open)}
@@ -605,8 +605,8 @@ const SlideInTemplate = ({ actions, aiLabel, slug, ...args }) => {
           >
             {open ? 'Close side panel' : 'Open side panel'}
           </Button>
-        </Column>
-      </Grid>
+        </div>
+      </div>
       <SidePanel
         {...args}
         open={open}
diff --git a/packages/ibm-products/src/components/SidePanel/_storybook-styles.scss b/packages/ibm-products/src/components/SidePanel/_storybook-styles.scss
index 236f24b4d4..32cf2ff51c 100644
--- a/packages/ibm-products/src/components/SidePanel/_storybook-styles.scss
+++ b/packages/ibm-products/src/components/SidePanel/_storybook-styles.scss
@@ -59,4 +59,22 @@ $story-prefix: side-panel-stories__;
   height: 100%;
 }
 
+.#{$story-prefix}story-container {
+  position: fixed;
+  display: grid;
+  block-size: 100vh;
+  grid-template-rows: 3rem 1fr;
+  inline-size: 100vw;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+
+.#{$story-prefix}story-content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  block-size: 100vh;
+}
+
 @include side-panel-decorator($story-prefix);