Integration page layout now uses 2 and 1 col grid layout

apps/webapp/app/components/ComingSoon.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 import { MainCenteredContainer } from "./layout/AppLayout";
-import { Header1, Header2 } from "./primitives/Headers";
-import { NamedIcon, NamedIconInBox } from "./primitives/NamedIcon";
+import { Header2 } from "./primitives/Headers";
+import { NamedIconInBox } from "./primitives/NamedIcon";
 import { Paragraph } from "./primitives/Paragraph";
 
 type ComingSoonProps = {
@@ -23,9 +23,9 @@ export function ComingSoon({ title, description, icon }: ComingSoonProps) {
           ) : (
             icon
           )}
-          <div className="mt-0.5 flex flex-col">
+          <div className="mt-0.5 flex flex-col gap-y-1">
             <Paragraph variant="extra-extra-small/caps">Coming soon</Paragraph>
-            <Header1 className="-mt-0.5">{title}</Header1>
+            <Header2 className="-mt-0.5">{title}</Header2>
           </div>
         </div>
         <Paragraph variant="small" className="p-4">

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.integrations_.$clientParam._index/route.tsx

@@ -1,19 +1,17 @@
 import { LoaderArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
-import { c } from "tar";
 import { HowToUseThisIntegration } from "~/components/helpContent/HelpContentText";
 import { JobSkeleton } from "~/components/jobs/JobSkeleton";
 import { JobsTable } from "~/components/jobs/JobsTable";
 import { Header2 } from "~/components/primitives/Headers";
 import { Help, HelpContent, HelpTrigger } from "~/components/primitives/Help";
 import { Input } from "~/components/primitives/Input";
-import { Paragraph } from "~/components/primitives/Paragraph";
 import { useFilterJobs } from "~/hooks/useFilterJobs";
 import { useIntegrationClient } from "~/hooks/useIntegrationClient";
-import { ProjectJob, useProject } from "~/hooks/useProject";
-import { useTextFilter } from "~/hooks/useTextFilter";
+import { useProject } from "~/hooks/useProject";
 import { IntegrationClientJobsPresenter } from "~/presenters/IntegrationClientJobsPresenter.server";
 import { requireUserId } from "~/services/session.server";
+import { cn } from "~/utils/cn";
 import { Handle } from "~/utils/handle";
 import { IntegrationClientParamSchema } from "~/utils/pathBuilder";
 
@@ -53,42 +51,49 @@ export default function Page() {
 
   return (
     <Help defaultOpen={projectJobs.length === 0}>
-      <div className="flex h-full gap-4">
-        <div className="grow">
-          <div className="mb-2 flex items-center justify-between gap-x-2">
+      {(open) => (
+        <div
+          className={cn(
+            "grid h-full gap-4",
+            open ? "grid-cols-2" : "grid-cols-1"
+          )}
+        >
+          <div className="grow">
+            <div className="mb-2 flex items-center justify-between gap-x-2">
+              {projectJobs.length === 0 ? (
+                <Header2>Jobs using this integration will appear here</Header2>
+              ) : (
+                <Input
+                  placeholder="Search Jobs"
+                  variant="tertiary"
+                  icon="search"
+                  fullWidth={true}
+                  value={filterText}
+                  onChange={(e) => setFilterText(e.target.value)}
+                />
+              )}
+              <HelpTrigger title="How do I use this integration?" />
+            </div>
             {projectJobs.length === 0 ? (
-              <Header2>Jobs using this integration will appear here</Header2>
+              <>
+                <JobSkeleton />
+              </>
             ) : (
-              <Input
-                placeholder="Search Jobs"
-                variant="tertiary"
-                icon="search"
-                fullWidth={true}
-                value={filterText}
-                onChange={(e) => setFilterText(e.target.value)}
+              <JobsTable
+                jobs={filteredItems}
+                noResultsText={
+                  projectJobs.length === 0
+                    ? `No Jobs are currently using "${client.title}"`
+                    : `No Jobs found for "${filterText}"`
+                }
               />
             )}
-            <HelpTrigger title="How do I use this integration?" />
           </div>
-          {projectJobs.length === 0 ? (
-            <>
-              <JobSkeleton />
-            </>
-          ) : (
-            <JobsTable
-              jobs={filteredItems}
-              noResultsText={
-                projectJobs.length === 0
-                  ? `No Jobs are currently using "${client.title}"`
-                  : `No Jobs found for "${filterText}"`
-              }
-            />
-          )}
+          <HelpContent title="How to use this integration">
+            <HowToUseThisIntegration />
+          </HelpContent>
         </div>
-        <HelpContent title="How to use this integration">
-          <HowToUseThisIntegration />
-        </HelpContent>
-      </div>
+      )}
     </Help>
   );
 }

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.integrations_.$clientParam/route.tsx

@@ -92,7 +92,7 @@ export default function Integrations() {
             <PageInfoProperty
               label="ID"
               value={
-                <ClipboardField value={client.slug} variant="secondary/small" />
+                <ClipboardField value={client.slug} variant="tertiary/small" />
               }
             />
             <PageInfoProperty