fix: SidePanel overflow-y issue

Author: MildTomato

src/components/SidePanel/SidePanel.stories.tsx

@@ -136,6 +136,58 @@ export const nestedSidepanels = (args: any) => {
   )
 }
 
+export const longContent = (args: any) => (
+  <>
+    <SidePanel {...args}>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+      <p className="text-scale-900">This is a paragraph</p>
+    </SidePanel>
+  </>
+)
+
 Default.args = {
   visible: true,
   onCancel: action('onCancel'),
@@ -202,3 +254,8 @@ triggerElement.args = {
   description: 'And i am the description',
   triggerElement: <Button as="span">Open</Button>,
 }
+
+longContent.args = {
+  visible: true,
+  header: 'Long content',
+}

src/lib/theme/defaultTheme.ts

@@ -955,6 +955,7 @@ export default {
     `,
     content: `
       relative flex-1 px-4 sm:px-6 py-4
+      overflow-y-auto
     `,
     footer: `
       flex justify-end gap-2