adding padding-top to have space

WestpacGEL · Jan 16, 2024 · 33062b0 · 33062b0
1 parent 1c5af37
commit 33062b0
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/apps/site/src/components/code/components/live-code/live-code.component.tsx b/apps/site/src/components/code/components/live-code/live-code.component.tsx
@@ -28,6 +28,7 @@ export function LiveCode({
   const responsiveModalState = useOverlayTriggerState({});
 
   const styles = liveCodeStyles({
+    showResponsiveDemo,
     isCodeVisible,
     language: live.language as VariantProps<typeof liveCodeStyles>['language'],
   });
@@ -62,7 +63,7 @@ export function LiveCode({
       <div className={styles.displayWrapper({})}>
         {showResponsiveDemo && (
           <Button
-            className="absolute right-2 top-2 z-10 py-0"
+            className="absolute right-2 top-2 z-10"
             size="small"
             soft
             look="faint"

diff --git a/apps/site/src/components/code/components/live-code/live-code.styles.ts b/apps/site/src/components/code/components/live-code/live-code.styles.ts
@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
   slots: {
     base: 'max-w-5xl bg-white p-6 pb-0',
-    displayWrapper: 'relative -mx-6 -mt-6 border-muted-50 p-6',
+    displayWrapper: 'relative -mx-6 -mt-6 border-muted-50 px-6',
     error: 'flex gap-2 rounded-md bg-danger-10 p-2 text-danger-90',
     buttonWrapper: '-mx-6 -mb-6 flex items-center justify-end ',
     codeWrapper:
@@ -19,6 +19,14 @@ export const styles = tv({
         displayWrapper: 'p-0',
       },
     },
+    showResponsiveDemo: {
+      true: {
+        displayWrapper: 'pb-6 pt-9',
+      },
+      false: {
+        displayWrapper: 'py-6',
+      },
+    },
     isCodeVisible: {
       true: {
         codeWrapper: 'block',