Restore code block animation on mobile (#246)

Author: haydenbleasel

docs/app/(home)/components/intro/intro.tsx

@@ -129,7 +129,7 @@ export const Intro = async () => {
       code={workflowCode}
       lang="ts"
       codeblock={{
-        className: `shadow-none !bg-background ${codeBlockClassname}`,
+        className: `shadow-none overflow-visible !bg-background border-b-0! ${codeBlockClassname}`,
       }}
     />
   );
@@ -138,7 +138,7 @@ export const Intro = async () => {
       code={nonWorkflowCode}
       lang="ts"
       codeblock={{
-        className: `shadow-none !bg-background ${codeBlockClassname} max-h-[310px] overflow-y-auto`,
+        className: `shadow-none overflow-visible !bg-background border-b-0! ${codeBlockClassname} max-h-[310px]`,
       }}
     />
   );
@@ -149,7 +149,7 @@ export const Intro = async () => {
         <h2 className="font-semibold text-xl tracking-tight sm:text-2xl md:text-3xl lg:text-[40px]">
           Reliability-as-code
         </h2>
-        <p className=" text-lg text-muted-foreground md:mt-4">
+        <p className="text-lg text-muted-foreground md:mt-4">
           Move from hand-rolled queues and custom retries to durable, resumable
           code with simple directives.
         </p>

docs/app/(home)/components/intro/non-workflow.tsx

@@ -100,9 +100,9 @@ export const NonWorkflowExample = ({
 
   return (
     <div className="relative isolate max-w-3xl mx-auto">
-      <div className="bg-background border rounded-md overflow-hidden">
+      <div className="bg-background border rounded-md overflow-x-auto pb-[52px]">
         <div className="relative">
-          <div className="hidden md:flex absolute z-10 flex-col left-[18px] top-[69px] pointer-events-none select-none">
+          <div className="flex absolute z-10 flex-col left-[18px] top-[69px] pointer-events-none select-none">
             {renderIndicator(lineStates[0])}
             <div className="h-[5px]" />
             {renderIndicator(lineStates[1])}
@@ -111,10 +111,7 @@ export const NonWorkflowExample = ({
           </div>
           {codeBlock}
         </div>
-        <WorkflowLogs
-          logs={logs}
-          className="p-4 font-mono text-sm text-muted-foreground"
-        />
+        <WorkflowLogs logs={logs} />
       </div>
     </div>
   );

docs/app/(home)/components/intro/workflow-logs.tsx

@@ -71,7 +71,8 @@ export function WorkflowLogs({
   return (
     <div
       className={cn(
-        'relative inline-block whitespace-nowrap w-full',
+        'relative inline-block whitespace-nowrap w-full border-t',
+        'overflow-x-auto p-4 font-mono text-sm text-muted-foreground absolute bottom-0 right-0 left-0',
         hasError && 'bg-destructive/10',
         className
       )}

docs/app/(home)/components/intro/workflow.tsx

@@ -158,9 +158,9 @@ export const WorkflowExample = ({
 
   return (
     <div className="relative isolate max-w-3xl mx-auto">
-      <div className="bg-background border rounded-md overflow-hidden">
+      <div className="bg-background border rounded-md overflow-x-auto pb-[52px]">
         <div className="relative">
-          <div className="hidden md:flex absolute z-10 flex-col left-[18px] top-[69px] pointer-events-none select-none">
+          <div className="flex absolute z-10 flex-col left-[18px] top-[69px] pointer-events-none select-none">
             {renderIndicator(lineStates[0])}
             <div className="h-[5px]" />
             {renderIndicator(lineStates[1])}
@@ -169,10 +169,7 @@ export const WorkflowExample = ({
           </div>
           {codeBlock}
         </div>
-        <WorkflowLogs
-          logs={logs}
-          className="p-4 font-mono text-sm text-muted-foreground"
-        />
+        <WorkflowLogs logs={logs} />
       </div>
     </div>
   );