fix(loops): make detail page scroll and polish list rows (#3743)

Co-authored-by: posthog[bot] <206114724+posthog[bot]@users.noreply.github.com>

Author: charlesvien

apps/code/snapshots.yml

@@ -569,13 +569,13 @@ snapshots:
     git-dialogs--sync-success--light:
         hash: v1.k4693efd2.8d79d77c9338aeaa73734836f0e17fde987f6d3239914f4013889d3110e5088d.Rq-w2o1uhes_a5hUWqMXeiDkfnoPCZPt932LkEQXCco
     loops-loopslistview--comprehensive--dark:
-        hash: v1.k4693efd2.a9b9a8b23cca2079c3ced1878b6537ee9fbbdd0d3de205a9584fbe7d6875d405.dWfER84S8r_MU7EVDmjW8CuCf6lNhTx6RjfV_cNzKOA
+        hash: v1.k4693efd2.3c2a6b87092674a3d395a6f5d36889ea231696d788b159f357be0926f3804c8a.Ihzlq7XIy9rRoA7DTbpLePlBhjP34o8ppgP__NXx-Yw
     loops-loopslistview--comprehensive--light:
-        hash: v1.k4693efd2.9ff3f3787ef56ab9d1d39562eed6f19b6c9c1e7a6d79965fbf99fbac16ba33fb.DDuj_KZx0pcUxXwCgzNGFmCemCT1MuCzIQmbbPMgatw
+        hash: v1.k4693efd2.42c2994def56651de08f5be20e98dbe67bfbdb03e7edd8bdf008401468c1653a.EnH7NwNkvclS7g5Htf7OCZuYEm7fI5W6hEr4DmwZC8I
     loops-loopslistview--long-mixed-list--dark:
-        hash: v1.k4693efd2.683dedbfa7da3313eeaf52ff9e3cc7908af5c77173b1cad450b2acd61ac30cd4.YFm7fXVZSr29fa0R40pzq-FjRZrqIBEsIMiOiddB840
+        hash: v1.k4693efd2.384486583f8d9b66a4bf1d9cc45036a07310cb9e1943ea5b52ff466f55a03d7b.F_sXrJ13XWHzAF8yhoKun_k4BY8Jcb3EDtT0L1I6nKw
     loops-loopslistview--long-mixed-list--light:
-        hash: v1.k4693efd2.577fa23e3bc43f0ba033a59669fa73035ff2d65df1f994cf5753ac306ca830cf.r3v1hne0uC4dHpkzXriz6yzcA3fD2b8wD6ZLxA_0Fuo
+        hash: v1.k4693efd2.d80a0c55c4490276df53f781ac88ed9d9c6ec282bc14ddb80140b3ddcc44d32f.L6hw9ZixUiyTFKOybYzmjfUSIOayvmhueMTcmYt-IWo
     scouts-scoutsfleetlist--filtered-to-you--dark:
         hash: v1.k4693efd2.a3af6e76ef36598eaa347bedc4430878ed62754660166398e0576a9978cd084b.x3Ky-O6HOw0srWdOmnnKJwFNpmGmQVWip0t7CwVaRXY
     scouts-scoutsfleetlist--filtered-to-you--light:

packages/ui/src/features/loops/components/LoopDetailView.tsx

@@ -105,7 +105,7 @@ export function LoopDetailView({ loopId }: { loopId: string }) {
 
   if (isLoading) {
     return (
-      <div className="mx-auto w-full max-w-5xl px-8 py-6">
+      <div className="mx-auto w-full max-w-5xl px-8 py-8">
         <div className="h-24 animate-pulse rounded-(--radius-2) border border-border bg-(--gray-2)" />
       </div>
     );
@@ -116,16 +116,20 @@ export function LoopDetailView({ loopId }: { loopId: string }) {
   }
 
   return (
-    <div className="mx-auto w-full max-w-5xl px-8 py-6">
-      <Flex direction="column" gap="5">
+    <div className="h-full min-h-0 overflow-y-auto">
+      <Flex
+        direction="column"
+        gap="5"
+        className="mx-auto w-full max-w-5xl px-8 py-8"
+      >
         <Flex direction="column" gap="3">
           <Button
             variant="link-muted"
-            size="xs"
+            size="sm"
             onClick={navigateToLoops}
             className="w-fit px-0"
           >
-            <ArrowLeftIcon size={13} />
+            <ArrowLeftIcon size={15} />
             Loops
           </Button>
 
@@ -148,7 +152,7 @@ export function LoopDetailView({ loopId }: { loopId: string }) {
               />
               <Button
                 variant="outline"
-                size="xs"
+                size="sm"
                 loading={runLoop.isPending}
                 disabled={runLoop.isPending}
                 onClick={handleRunNow}
@@ -157,14 +161,14 @@ export function LoopDetailView({ loopId }: { loopId: string }) {
               </Button>
               <Button
                 variant="outline"
-                size="xs"
+                size="sm"
                 onClick={() => navigateToEditLoop(loop.id)}
               >
                 Edit
               </Button>
               <Button
                 variant="destructive"
-                size="xs"
+                size="sm"
                 onClick={() => setDeleteOpen(true)}
               >
                 Delete
@@ -406,7 +410,7 @@ function InstructionsSection({ loop }: { loop: LoopSchemas.Loop }) {
         value={draft ?? loop.instructions}
         disabled={updateLoop.isPending}
         aria-label="Loop instructions"
-        className="min-h-[200px] bg-(--color-panel-solid) text-[12.5px] leading-relaxed"
+        className="max-h-[400px] min-h-[200px] bg-(--color-panel-solid) text-[12.5px] leading-relaxed"
         onChange={(e) => setDraft(e.currentTarget.value)}
         onBlur={(e) => commit(e.currentTarget.value)}
         onKeyDown={(e) => {

packages/ui/src/features/loops/components/LoopRow.tsx

@@ -25,11 +25,6 @@ export function LoopRow({
   creatorLookupComplete?: boolean;
 }) {
   const description = loop.description.trim();
-  const triggerLabel = loop.triggers.length === 1 ? "trigger" : "triggers";
-  const triggerSummary =
-    loop.triggers.length === 0
-      ? "No triggers configured"
-      : `${loop.triggers.length} ${triggerLabel}`;
 
   let creatorLabel: string | null = null;
   if (loop.visibility === "team" && creatorError) {
@@ -46,7 +41,7 @@ export function LoopRow({
       : "Created by a former organization member";
   }
 
-  const metadata = [triggerSummary];
+  const metadata: string[] = [];
   const notificationDestinations = summarizeNotificationDestinations(
     loop.notifications,
   );
@@ -63,22 +58,24 @@ export function LoopRow({
     >
       <Flex align="center" gap="3" className="min-w-0">
         <RepeatIcon size={20} className="shrink-0 text-gray-11" />
-        <Flex direction="column" className="min-w-0 gap-0.5">
+        <Flex direction="column" gap="1" className="min-w-0">
           <Flex align="center" gap="2" className="min-w-0">
             <Text className="truncate font-medium text-[13px] text-gray-12">
               {loop.name}
             </Text>
             <Badge color={loopStatusColor(loop)}>{loopStatusLabel(loop)}</Badge>
             <Badge color="gray">{loop.visibility}</Badge>
           </Flex>
-          <Text className="text-[12px] text-gray-11 leading-snug">
-            {metadata.join(" · ")}
-          </Text>
           {description ? (
-            <Text className="truncate text-[12px] text-gray-10 leading-snug">
+            <Text className="truncate text-[12px] text-gray-11 leading-snug">
               {description}
             </Text>
           ) : null}
+          {metadata.length > 0 ? (
+            <Text className="mt-0.5 text-(--accent-11) text-[11px] leading-snug">
+              {metadata.join(" · ")}
+            </Text>
+          ) : null}
         </Flex>
       </Flex>
       <Flex align="center" gap="3" className="shrink-0">

packages/ui/src/features/loops/components/LoopsListView.tsx

@@ -6,7 +6,7 @@ import { useSetHeaderContent } from "@posthog/ui/hooks/useSetHeaderContent";
 import { Button } from "@posthog/ui/primitives/Button";
 import { navigateToNewLoop } from "@posthog/ui/router/navigationBridge";
 import { Flex, Heading, Text } from "@radix-ui/themes";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { useLoopLimits, useLoops } from "../hooks/useLoops";
 import { useLoopDraftStore } from "../loopDraftStore";
 import type { LoopTemplate } from "../loopTemplates";
@@ -24,6 +24,8 @@ function loopLimitReason(max: number): string {
 
 const EMPTY_MEMBERS: UserBasic[] = [];
 
+const SECTION_PREVIEW_COUNT = 5;
+
 function startBlankLoop(): void {
   useLoopDraftStore.getState().setPrefill(null);
   navigateToNewLoop();
@@ -219,13 +221,16 @@ function LoopListSection({
   membersError?: boolean;
   membersComplete?: boolean;
 }) {
+  const [expanded, setExpanded] = useState(false);
+  const visibleLoops = expanded ? loops : loops.slice(0, SECTION_PREVIEW_COUNT);
+
   return (
     <Flex direction="column" gap="3">
       <Text className="font-medium text-[12px] text-gray-10 uppercase tracking-wide">
         {title}
       </Text>
       <Flex direction="column" gap="2">
-        {loops.map((loop) => (
+        {visibleLoops.map((loop) => (
           <LoopRow
             key={loop.id}
             loop={loop}
@@ -236,6 +241,17 @@ function LoopListSection({
           />
         ))}
       </Flex>
+      {loops.length > SECTION_PREVIEW_COUNT ? (
+        <Button
+          variant="ghost"
+          color="gray"
+          size="1"
+          className="w-fit"
+          onClick={() => setExpanded(!expanded)}
+        >
+          {expanded ? "Show fewer" : `Show all ${loops.length}`}
+        </Button>
+      ) : null}
     </Flex>
   );
 }