fix: mobile jitter regression (#1119)

fern-api · Jul 8, 2024 · 0c0f089 · 0c0f089
1 parent 75ca71f
commit 0c0f089
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 7 deletions.
diff --git a/packages/ui/app/src/api-page/endpoints/EndpointContent.tsx b/packages/ui/app/src/api-page/endpoints/EndpointContent.tsx
@@ -227,7 +227,8 @@ const UnmemoizedEndpointContent: React.FC<EndpointContent.Props> = ({
     const initialExampleHeight =
         requestHeight + responseHeight + (responseHeight > 0 && requestHeight > 0 ? GAP_6 : 0) + padding;
 
-    const [exampleHeight, setExampleHeight] = useState(initialExampleHeight);
+    const [exampleHeightWithoutPadding, setExampleHeight] = useState(initialExampleHeight);
+    const exampleHeight = exampleHeightWithoutPadding + 8 * 2 * 4;
     const minHeight = useAtomValue(
         useMemo(
             () =>
@@ -236,7 +237,7 @@ const UnmemoizedEndpointContent: React.FC<EndpointContent.Props> = ({
                     if (breakpoint === "sm" || breakpoint === "mobile") {
                         return 0;
                     } else {
-                        return exampleHeight + 8 * 2 * 4;
+                        return exampleHeight;
                     }
                 }),
             [exampleHeight],
@@ -321,7 +322,12 @@ const UnmemoizedEndpointContent: React.FC<EndpointContent.Props> = ({
                         />
                     </div>
 
-                    <aside className="fern-endpoint-content-right">
+                    <aside
+                        className="fern-endpoint-content-right"
+                        style={{
+                            height: isInViewport ? undefined : `${exampleHeight}px`,
+                        }}
+                    >
                         {isInViewport && (
                             <EndpointContentCodeSnippets
                                 api={api}

diff --git a/packages/ui/app/src/themes/cohere/CohereDocs.scss b/packages/ui/app/src/themes/cohere/CohereDocs.scss
@@ -108,14 +108,13 @@
         .fern-endpoint-content-right {
             @apply max-w-content-width;
             @apply md:flex-1 md:sticky md:self-start md:top-0;
-            @apply mt-12;
 
             // the 4rem is the same as the h-10 as the Header
             @apply max-h-content;
             @apply flex;
 
             // header offset
-            @apply md:py-8 md:mt-0;
+            @apply py-8;
 
             @media (screen(md)) {
                 max-height: var(--content-height);

diff --git a/packages/ui/app/src/themes/default/DefaultDocs.scss b/packages/ui/app/src/themes/default/DefaultDocs.scss
@@ -117,10 +117,9 @@
         .fern-endpoint-content-right {
             @apply max-w-content-width;
             @apply md:flex-1 md:sticky md:self-start md:top-header-offset;
-            @apply max-md:mt-12;
 
             // the 4rem is the same as the h-10 as the Header
-            @apply max-h-content py-8 flex max-md:pt-0;
+            @apply max-h-content py-8 flex;
         }
     }