[INSIGHT-508] Fix Insight blueprint card alignment + Set max height on blueprint playground

Author: MananTank

apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/[blueprint_slug]/blueprint-playground.client.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
-import { useHeightObserver } from "@/components/ui/DynamicHeight";
+import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
@@ -195,11 +195,6 @@ export function BlueprintPlaygroundUI(props: {
     props.onRun(url);
   }
 
-  // This allows us to always limit the grid height to whatever is the height of left section on desktop
-  // so that entire left section is always visible, but the right section has a scrollbar if it exceeds the height of left section
-  const { height, elementRef: leftSectionRef } = useHeightObserver();
-  const isMobile = useIsMobileViewport();
-
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)}>
@@ -240,10 +235,7 @@ export function BlueprintPlaygroundUI(props: {
                 clientId={props.clientId}
               />
               <div className="grid grow grid-cols-1 lg:grid-cols-2">
-                <div
-                  className="flex grow flex-col max-sm:border-b lg:border-r"
-                  ref={leftSectionRef}
-                >
+                <div className="flex max-h-[500px] grow flex-col max-sm:border-b lg:max-h-[740px] lg:border-r">
                   <RequestConfigSection
                     domain={props.domain}
                     parameters={parameters}
@@ -253,12 +245,7 @@ export function BlueprintPlaygroundUI(props: {
                   />
                 </div>
 
-                <div
-                  className="flex min-h-[500px] grow flex-col lg:min-h-[740px]"
-                  style={{
-                    height: !isMobile && height ? `${height}px` : "auto",
-                  }}
-                >
+                <div className="flex h-[500px] grow flex-col lg:h-[740px]">
                   <ResponseSection
                     isPending={props.isPending}
                     response={props.response}
@@ -417,35 +404,37 @@ function RequestConfigSection(props: {
   const queryParams = props.parameters.filter((param) => param.in === "query");
 
   return (
-    <div className="flex grow flex-col">
+    <div className="flex grow flex-col overflow-hidden">
       <div className="flex min-h-[60px] items-center gap-2 border-b p-4 text-sm">
         <ArrowUpRightIcon className="size-5" />
         Request
       </div>
 
-      {pathVariables.length > 0 && (
-        <ParameterSection
-          parameters={pathVariables}
-          title="Path Variables"
-          form={props.form}
-          domain={props.domain}
-          path={props.path}
-          supportedChainIds={props.supportedChainIds}
-        />
-      )}
+      <ScrollShadow className="flex-1" scrollableClassName="max-h-full">
+        {pathVariables.length > 0 && (
+          <ParameterSection
+            parameters={pathVariables}
+            title="Path Variables"
+            form={props.form}
+            domain={props.domain}
+            path={props.path}
+            supportedChainIds={props.supportedChainIds}
+          />
+        )}
 
-      {pathVariables.length > 0 && queryParams.length > 0 && <Separator />}
+        {pathVariables.length > 0 && queryParams.length > 0 && <Separator />}
 
-      {queryParams.length > 0 && (
-        <ParameterSection
-          parameters={queryParams}
-          title="Query Parameters"
-          form={props.form}
-          domain={props.domain}
-          path={props.path}
-          supportedChainIds={props.supportedChainIds}
-        />
-      )}
+        {queryParams.length > 0 && (
+          <ParameterSection
+            parameters={queryParams}
+            title="Query Parameters"
+            form={props.form}
+            domain={props.domain}
+            path={props.path}
+            supportedChainIds={props.supportedChainIds}
+          />
+        )}
+      </ScrollShadow>
     </div>
   );
 }
@@ -758,22 +747,3 @@ function ElapsedTimeCounter() {
     </span>
   );
 }
-
-const isMobileMedia = () => {
-  if (typeof window === "undefined") return false;
-  return window.matchMedia("(max-width: 640px)").matches;
-};
-
-function useIsMobileViewport() {
-  const [state, setState] = useState(isMobileMedia);
-
-  // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    const handleResize = () => setState(isMobileMedia());
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
-
-  return state;
-}

apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/page.tsx

@@ -98,26 +98,24 @@ function BlueprintCard(props: {
   description: string;
 }) {
   return (
-    <div className="relative rounded-lg border border-border bg-muted/50 p-4 hover:bg-muted/70">
-      <div className="flex items-center gap-3">
-        <div className="rounded-xl border p-1">
-          <div className="rounded-lg border bg-muted p-1">
-            <BoxIcon className="size-5 text-muted-foreground" />
-          </div>
+    <div className="relative flex items-center gap-3 rounded-lg border border-border bg-muted/50 px-4 py-5 hover:bg-muted/70">
+      <div className="shrink-0 rounded-xl border p-1">
+        <div className="rounded-lg border bg-muted p-1">
+          <BoxIcon className="size-5 text-muted-foreground" />
         </div>
+      </div>
 
-        <div>
-          <Link
-            className="group static before:absolute before:top-0 before:right-0 before:bottom-0 before:left-0 before:z-0"
-            href={props.href}
-          >
-            <h2 className="font-medium text-base">{props.title}</h2>
-          </Link>
+      <div className="flex flex-col gap-1">
+        <Link
+          className="group static before:absolute before:top-0 before:right-0 before:bottom-0 before:left-0 before:z-0"
+          href={props.href}
+        >
+          <h2 className="font-medium text-base">{props.title}</h2>
+        </Link>
 
-          <p className="line-clamp-1 text-muted-foreground text-sm">
-            {props.description}
-          </p>
-        </div>
+        <p className="line-clamp-1 text-muted-foreground text-sm">
+          {props.description}
+        </p>
       </div>
     </div>
   );