Remove top/bottom sheet

Author: nolannbiron

packages/gitbook/src/components/utils/Sheet.tsx

@@ -42,26 +42,22 @@ export function SheetContent({
     ...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
     overlayClassName?: string;
-    side?: 'top' | 'right' | 'bottom' | 'left';
+    side?: 'right' | 'left';
 }) {
     return (
         <>
             <SheetOverlay className={overlayClassName} />
             <SheetPrimitive.Content
                 data-slot="sheet-content"
                 className={tcls(
-                    'fixed z-50 flex flex-col shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:duration-300 data-[state=open]:duration-500',
+                    'fixed z-50 flex flex-col shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
                     'bg-tint-base theme-gradient-tint:bg-gradient-tint theme-gradient:bg-gradient-primary theme-muted:bg-tint-subtle [html.sidebar-filled.theme-bold.tint_&]:bg-tint-subtle',
                     'border-tint-subtle',
-                    'inset-x-1 inset-y-1 rounded-xl border',
+                    'inset-x-0 inset-y-1 w-10/12 rounded-xl border sm:max-w-sm',
                     side === 'right' &&
-                        'right-1 w-10/12 data-[state=closed]:animate-exitToRight data-[state=open]:animate-enterFromRight sm:max-w-sm',
+                        'right-1 data-[state=closed]:animate-exitToRight data-[state=open]:animate-enterFromRight',
                     side === 'left' &&
-                        'left-1 w-10/12 data-[state=closed]:animate-exitToLeft data-[state=open]:animate-enterFromLeft sm:max-w-sm',
-                    side === 'top' &&
-                        'inset-x-0 top-0 h-auto data-[state=closed]:animate-exitToTop data-[state=open]:animate-enterFromTop',
-                    side === 'bottom' &&
-                        'inset-x-0 bottom-0 h-auto data-[state=closed]:animate-exitToBottom data-[state=open]:animate-enterFromBottom',
+                        'left-1 data-[state=closed]:animate-exitToLeft data-[state=open]:animate-enterFromLeft',
                     className
                 )}
                 {...props}

packages/gitbook/tailwind.config.ts

@@ -304,10 +304,6 @@ const config: Config = {
                 enterFromRight: 'enterFromRight 250ms ease',
                 exitToLeft: 'exitToLeft 250ms ease',
                 exitToRight: 'exitToRight 250ms ease',
-                enterFromTop: 'enterFromTop 250ms ease',
-                enterFromBottom: 'enterFromBottom 250ms ease',
-                exitToTop: 'exitToTop 250ms ease',
-                exitToBottom: 'exitToBottom 250ms ease',
             },
             keyframes: {
                 pulseAlt: {
@@ -426,22 +422,6 @@ const config: Config = {
                     from: { opacity: '1', transform: 'translateX(0)' },
                     to: { opacity: '0', transform: 'translateX(-200px)' },
                 },
-                enterFromTop: {
-                    from: { opacity: '0', transform: 'translateY(-200px)' },
-                    to: { opacity: '1', transform: 'translateY(0)' },
-                },
-                enterFromBottom: {
-                    from: { opacity: '0', transform: 'translateY(200px)' },
-                    to: { opacity: '1', transform: 'translateY(0)' },
-                },
-                exitToTop: {
-                    from: { opacity: '1', transform: 'translateY(0)' },
-                    to: { opacity: '0', transform: 'translateY(-200px)' },
-                },
-                exitToBottom: {
-                    from: { opacity: '1', transform: 'translateY(0)' },
-                    to: { opacity: '0', transform: 'translateY(200px)' },
-                },
                 scaleIn: {
                     from: { opacity: '0', transform: 'rotateX(-10deg) scale(0.9)' },
                     to: { opacity: '1', transform: 'rotateX(0deg) scale(1)' },