[Beta] Fix layout shift from previews (#4322)

* [Beta] Fix layout shift from previews

* Arbitrary values

* Fix borked style

* Remove custom styles and start again

* Recreate existing layout

* Try to make it work

* Fix TS

Co-authored-by: Dan Lebowitz <dan.lebo@me.com>

beta/src/components/MDX/Sandpack/CustomPreset.tsx

@@ -44,13 +44,6 @@ export function CustomPreset({
   }
   const lineCount = lineCountRef.current[activePath];
   const isExpandable = lineCount > 16 || isExpanded;
-  const editorHeight = isExpandable ? lineCount * 24 + 24 : 'auto'; // shown lines * line height (24px)
-  const getHeight = () => {
-    if (!isExpandable) {
-      return editorHeight;
-    }
-    return isExpanded ? editorHeight : 406;
-  };
 
   return (
     <>
@@ -63,31 +56,19 @@ export function CustomPreset({
             ref={sandpack.lazyAnchorRef}
             className={cn(
               'sp-layout sp-custom-layout',
-              showDevTools && devToolsLoaded && 'sp-layout-devtools'
+              showDevTools && devToolsLoaded && 'sp-layout-devtools',
-            )}
+              isExpanded && 'sp-layout-expanded'
-            style={{
+            )}>
-              // Prevent it from collapsing below the initial (non-loaded) height.
-              // There has to be some better way to do this...
-              minHeight: 216,
-            }}>
             <SandpackCodeEditor
-              customStyle={{
-                height: getHeight(),
-                maxHeight: isExpanded ? '' : 406,
-              }}
               showLineNumbers
               showInlineErrors
               showTabs={false}
+              showRunButton={false}
             />
             <Preview
-              isExpanded={isExpanded}
               className="order-last xl:order-2"
-              customStyle={{
+              isExpanded={isExpanded}
-                height: getHeight(),
-                maxHeight: isExpanded ? '' : 406,
-              }}
             />
-
             {isExpandable && (
               <button
                 translate="yes"

beta/src/components/MDX/Sandpack/Preview.tsx

@@ -12,7 +12,7 @@ import {computeViewportSize, generateRandomId} from './utils';
 
 type CustomPreviewProps = {
   className?: string;
-  customStyle: Record<string, unknown>;
+  customStyle?: Record<string, unknown>;
   isExpanded: boolean;
 };
 
@@ -135,13 +135,11 @@ export function Preview({
       }}>
       <div
         className={cn(
-          'p-0 sm:p-2 md:p-4 lg:p-8 bg-card dark:bg-wash-dark h-full relative rounded-b-lg lg:rounded-b-none',
+          'p-0 sm:p-2 md:p-4 lg:p-8 md:bg-card md:dark:bg-wash-dark h-full relative md:rounded-b-lg lg:rounded-b-none',
           // Allow content to be scrolled if it's too high to fit.
           // Note we don't want this in the expanded state
           // because it breaks position: sticky (and isn't needed anyway).
-          // We also don't want this for errors because they expand
+          !isExpanded && (error || isReady) ? 'overflow-auto' : null
-          // parent and making them scrollable is confusing.
-          !isExpanded && !error && isReady ? 'overflow-auto' : null
         )}>
         <div
           style={{
@@ -156,7 +154,7 @@ export function Preview({
           <iframe
             ref={iframeRef}
             className={cn(
-              'rounded-t-none bg-white shadow-md sm:rounded-lg w-full max-w-full',
+              'rounded-t-none bg-white md:shadow-md sm:rounded-lg w-full max-w-full',
               // We can't *actually* hide content because that would
               // break calculating the computed height in the iframe
               // (which we're using for autosizing). This is noticeable

beta/src/components/MDX/Sandpack/index.tsx

@@ -107,7 +107,7 @@ function Sandpack(props: SandpackProps) {
         );
       }
       result[filePath] = {
-        code: props.children as string,
+        code: (props.children as string).trim(),
         hidden: fileHidden,
         active: fileActive,
       };

beta/src/styles/sandpack.css

@@ -113,10 +113,6 @@ html.dark .sp-tabs .sp-tab-button[data-active='true'] {
  *
  * If you know a better way to keep them from diverging, send a PR.
  */
-.sp-stack {
-  height: initial !important;
-  width: 100% !important;
-}
 .sp-cm {
   -webkit-text-size-adjust: none !important;
   padding: 0 !important;
@@ -250,3 +246,52 @@ html.dark .sp-devtools > div {
     }
   }
 }
+
+.sp-layout {
+  min-height: 216px;
+}
+.sp-layout > .sp-stack:nth-child(1) {
+  /* Force vertical if there isn't enough space. */
+  min-width: 431px;
+  /* No min height on mobile because we know code in advance. */
+  /* Max height is needed to avoid too long files. */
+  max-height: 40vh;
+}
+.sp-layout > .sp-stack:nth-child(2) {
+  /* Force vertical if there isn't enough space. */
+  min-width: 431px;
+  /* Keep preview a fixed size on mobile to avoid jumps. */
+  /* This is because we don't know its content in advance. */
+  min-height: 40vh;
+  max-height: 40vh;
+}
+.sp-layout.sp-layout-expanded > .sp-stack:nth-child(1) {
+  /* Clicking "show more" lets mobile editor go full height. */
+  max-height: unset;
+  height: auto;
+}
+.sp-layout.sp-layout-expanded > .sp-stack:nth-child(2) {
+  /* Clicking "show more" lets mobile preview go full height. */
+  max-height: unset;
+  height: auto;
+}
+@media (min-width: 1280px) {
+  .sp-layout > .sp-stack:nth-child(1) {
+    /* On desktop, clamp height by pixels instead. */
+    height: auto;
+    min-height: unset;
+    max-height: 406px;
+  }
+  .sp-layout > .sp-stack:nth-child(2) {
+    /* On desktop, clamp height by pixels instead. */
+    height: auto;
+    min-height: unset;
+    max-height: 406px;
+  }
+  .sp-layout.sp-layout-expanded > .sp-stack:nth-child(1) {
+    max-height: unset;
+  }
+  .sp-layout.sp-layout-expanded > .sp-stack:nth-child(2) {
+    max-height: unset;
+  }
+}

beta/tailwind.config.js

@@ -21,10 +21,12 @@ module.exports = {
     },
     boxShadow: {
       sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-      DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+      DEFAULT:
+        '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
       md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
       lg: '0px 0.8px 2px rgba(0, 0, 0, 0.032), 0px 2.7px 6.7px rgba(0, 0, 0, 0.048), 0px 12px 30px rgba(0, 0, 0, 0.08)',
-      'lg-dark': '0 0 0 1px rgba(255,255,255,.15), 0px 0.8px 2px rgba(0, 0, 0, 0.032), 0px 2.7px 6.7px rgba(0, 0, 0, 0.048), 0px 12px 30px rgba(0, 0, 0, 0.08)',
+      'lg-dark':
+        '0 0 0 1px rgba(255,255,255,.15), 0px 0.8px 2px rgba(0, 0, 0, 0.032), 0px 2.7px 6.7px rgba(0, 0, 0, 0.048), 0px 12px 30px rgba(0, 0, 0, 0.08)',
       xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
       '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
       '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
@@ -33,7 +35,7 @@ module.exports = {
     },
     extend: {
       maxWidth: {
-        xs: '21rem'
+        xs: '21rem',
       },
       outline: {
         blue: ['1px auto ' + colors.link, '3px'],