Added a description panel to the Concurrency admin page

Author: samejr

apps/webapp/app/routes/admin.concurrency.tsx

@@ -1,6 +1,8 @@
+import { InformationCircleIcon } from "@heroicons/react/20/solid";
 import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { redirect, typedjson, useTypedLoaderData } from "remix-typedjson";
 import { Header1 } from "~/components/primitives/Headers";
+import { InfoPanel } from "~/components/primitives/InfoPanel";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { requireUser } from "~/services/session.server";
 import { concurrencyTracker } from "~/v3/services/taskRunConcurrencyTracker.server";
@@ -23,16 +25,22 @@ export default function AdminDashboardRoute() {
   return (
     <main
       aria-labelledby="primary-heading"
-      className="flex h-full min-w-0 flex-1 flex-col gap-6 overflow-y-auto px-4 pb-4 lg:order-last"
+      className="flex h-full w-fit min-w-0 flex-1 flex-col gap-4 overflow-y-auto px-4 pb-4 lg:order-last"
     >
-      <div>
-        <Header1 spacing>Dev</Header1>
-        <Paragraph spacing>{devConcurrency}</Paragraph>
-      </div>
-      <div>
-        <Header1 spacing>Deployed</Header1>
-        <Paragraph spacing>{deployedConcurrency}</Paragraph>
+      <div className="flex items-center divide-x divide-grid-bright rounded border border-grid-bright">
+        <div className="w-1/2 p-3">
+          <Paragraph spacing>Dev</Paragraph>
+          <Header1>{devConcurrency}</Header1>
+        </div>
+        <div className="w-1/2 p-3">
+          <Paragraph spacing>Deployed</Paragraph>
+          <Header1>{deployedConcurrency}</Header1>
+        </div>
       </div>
+      <InfoPanel icon={InformationCircleIcon}>
+        This refers to the number of 'Dequeued' runs, which are either currently executing or about
+        to begin execution.
+      </InfoPanel>
     </main>
   );
 }