fix: SidePanel overflow-y issue

supabase · Feb 14, 2022 · 02efd17 · 02efd17
1 parent f9e8058
commit 02efd17
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 0 deletions.
diff --git a/src/components/SidePanel/SidePanel.stories.tsx b/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',
+}
diff --git a/src/lib/theme/defaultTheme.ts b/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