Skip to content

fix(loops): Tighten space above the loop list tabs #3830

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
charlesvien merged 2 commits into from
Jul 27, 2026
+70 −68
Merged

fix(loops): Tighten space above the loop list tabs #3830

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7ced7f5
tighten space above loops list tabs
charlesvien Jul 27, 2026
0f491e0
chore(visual): update storybook baselines
posthog[bot] Jul 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions apps/code/snapshots.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -561,17 +561,17 @@ snapshots:
git-dialogs--sync-success--light:
hash: v1.k4693efd2.8d79d77c9338aeaa73734836f0e17fde987f6d3239914f4013889d3110e5088d.Rq-w2o1uhes_a5hUWqMXeiDkfnoPCZPt932LkEQXCco
loops-loopslistview--comprehensive--dark:
hash: v1.k4693efd2.b9223e477701b5ef4587310a1de71500dd5214222531648ef76d66766b049a9f.2lckIm16WmmwZv1xVZnUL42InIHDzemQwU3EJzzw9_U
hash: v1.k4693efd2.c128012b7f910839e65e8eaf14d5456c93f90d77747d0625ca35fddd8d5adf7a.fuugB5Ov6boP7fg6fWP7A7IG2yYnPUAAWLKZLuV8rZ0
loops-loopslistview--comprehensive--light:
hash: v1.k4693efd2.1f172c831aefdfd4b3bae97af84f80aae3c09c4919f6b1b68315240cc482af50.hnrwbv8il_Ay6DcYxmQXNtxKU3rqOIWAkjnGB8n4AT4
hash: v1.k4693efd2.4d25a48e0bd7e60d3bbb433e246486e4c9ac95979db86e20eb8bf5cb119d1eb2.EzrENjVHwVMyV00pEA-71TeVomJtchiym5DqWFkujlA
loops-loopslistview--long-mixed-list--dark:
hash: v1.k4693efd2.654250bc74fff46c496747eb13031e0e7a7ef264be5bb7be41451d82a497a515.vvrxXbbABkVY3hcHS3oThQ339JFgwIzB8E4n1usVWf0
hash: v1.k4693efd2.fdbf0c24cb386c4345279db3e648efe72aa8a2a984d491361522f62074a771c9.2QmRxRMWYFFfBFrbMm0Dm9rWcvd1lfRbc0egfzoESnY
loops-loopslistview--long-mixed-list--light:
hash: v1.k4693efd2.8dee426bab2a63843aefe9cf0765799ae9e3c5ece4adc522dc63faf3b362716b.K90qmg7hD8qD522iR-Y5lbr6ETEzRuYgQdYl0Z520do
hash: v1.k4693efd2.aa17d9b6f40fbd3914bd742951db9f90add0bd233c54170803c8483aeb45b43b.yXpqqGczOq1uW5k4Ie7ddNTnne-cFTglZ9cL800pXB4
loops-loopslistview--with-builder-sessions--dark:
hash: v1.k4693efd2.84cfc28bedc22a6728ba4ecf69274ab03537faeed5333775991716bf0b5f439e.fHsD0XKPnud-oDM4PLJ7edCbMnVcW6uVMdMHBYp3K08
hash: v1.k4693efd2.df4a1a4764e1de7b69905814b09c30d9b43f705f5e66c7ad83829c567d4faa1a.jthufoX_KPbbxScjj3pPBA4lEtT9Ym6zUCH-v1759GM
loops-loopslistview--with-builder-sessions--light:
hash: v1.k4693efd2.fb6c9b85bd660a6be4645cf7ba8fe3ab08a169e3823e5354325b7d7ecbe13aba.4FbKrdxiUN1PZOGwFa_kl7Rpz3Z8DnTVNJvUM_3FIp0
hash: v1.k4693efd2.eb65c38bb0de7efedbc0d7a6c27a6695528e2e6b60949617e7d22335b1e68c8b.fJr9uykvc8S7LI_ASXk5KRqxXCwIqh6ld9zfzs4shP0
scouts-scoutsfleetlist--filtered-to-you--dark:
hash: v1.k4693efd2.a3af6e76ef36598eaa347bedc4430878ed62754660166398e0576a9978cd084b.x3Ky-O6HOw0srWdOmnnKJwFNpmGmQVWip0t7CwVaRXY
scouts-scoutsfleetlist--filtered-to-you--light:
Expand Down
126 changes: 64 additions & 62 deletions packages/ui/src/features/loops/components/LoopsListView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,71 +192,73 @@ export function LoopsListViewPresentation({
gap="6"
className="@container mx-auto w-full max-w-5xl px-8 py-8"
>
<div className="flex @min-[640px]:flex-row flex-col items-start @min-[640px]:items-center justify-between gap-3">
<Flex direction="column" gap="1" className="min-w-0">
<Flex align="center" gap="2" wrap="wrap">
<Heading className="font-bold text-2xl">Loops</Heading>
<Flex
align="center"
className="gap-1.5 rounded-full bg-(--accent-a3) px-2.5 py-1"
>
<CloudIcon
size={12}
weight="fill"
className="text-(--accent-11)"
/>
<Text className="whitespace-nowrap font-medium text-(--accent-11) text-[11px]">
Runs entirely in the cloud
</Text>
<Flex direction="column" gap="4">
<div className="flex @min-[640px]:flex-row flex-col items-start @min-[640px]:items-center justify-between gap-3">
<Flex direction="column" gap="1" className="min-w-0">
<Flex align="center" gap="2" wrap="wrap">
<Heading className="font-bold text-2xl">Loops</Heading>
<Flex
align="center"
className="gap-1.5 rounded-full bg-(--accent-a3) px-2.5 py-1"
>
<CloudIcon
size={12}
weight="fill"
className="text-(--accent-11)"
/>
<Text className="whitespace-nowrap font-medium text-(--accent-11) text-[11px]">
Runs entirely in the cloud
</Text>
</Flex>
</Flex>
<Text color="gray" className="max-w-2xl text-sm">
Put your work on autopilot. Loops run on a schedule, on an API
call, or when something happens on GitHub. You can finally
close the laptop!
</Text>
</Flex>
<Text color="gray" className="max-w-2xl text-sm">
Put your work on autopilot. Loops run on a schedule, on an API
call, or when something happens on GitHub. You can finally close
the laptop!
</Text>
</Flex>
<Button
variant="soft"
color="gray"
size="2"
onClick={onStartBlank}
disabled={limitReason != null}
disabledReason={limitReason}
>
<PlusIcon size={14} />
Create manually
</Button>
</div>
<Button
variant="soft"
color="gray"
size="2"
onClick={onStartBlank}
disabled={limitReason != null}
disabledReason={limitReason}
>
<PlusIcon size={14} />
Create manually
</Button>
</div>

{isLoading ? (
<LoopsSkeleton />
) : error ? (
<LoopsEmptyNotice
title="Couldn't load loops."
hint={
error instanceof Error
? error.message
: "The loops API returned an error."
}
/>
) : loops.length > 0 ? (
<LoopListTabs
personalLoops={personalLoops}
teamLoops={teamLoops}
members={members}
membersLoading={membersLoading}
membersError={membersError}
membersComplete={membersComplete}
onCreate={onStartBlank}
disabledReason={limitReason}
/>
) : (
<LoopsEmptyState
onCreate={onStartBlank}
disabledReason={limitReason}
/>
)}
{isLoading ? (
<LoopsSkeleton />
) : error ? (
<LoopsEmptyNotice
title="Couldn't load loops."
hint={
error instanceof Error
? error.message
: "The loops API returned an error."
}
/>
) : loops.length > 0 ? (
<LoopListTabs
personalLoops={personalLoops}
teamLoops={teamLoops}
members={members}
membersLoading={membersLoading}
membersError={membersError}
membersComplete={membersComplete}
onCreate={onStartBlank}
disabledReason={limitReason}
/>
) : (
<LoopsEmptyState
onCreate={onStartBlank}
disabledReason={limitReason}
/>
)}
</Flex>

<LoopTemplatesSection onSelect={onStartFromTemplate} />
</Flex>
Expand Down
Loading