fix: Diff accordion sticky headers (#583)

* Make diff accordion headers sticky while scrolling

Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com>

* Fix diff header hover and borders

Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>

Author: kentcdodds

packages/workshop-app/app/components/diff.tsx

@@ -430,9 +430,8 @@ export function DiffImplementation({
 												<Accordion.Item
 													key={`${fileValue}:${index}`}
 													value={fileValue}
-													className="border-b"
 												>
-													<Accordion.Header className="hover:bg-foreground/10 relative flex w-full items-center gap-3 px-4 py-2">
+													<Accordion.Header className="bg-background/95 hover:bg-background/90 supports-[backdrop-filter]:bg-background/80 supports-[backdrop-filter]:hover:bg-background/70 border-border/70 relative sticky top-0 z-10 flex w-full items-center gap-3 border-b px-4 py-2 backdrop-blur">
 														<Accordion.Trigger className="group flex min-w-0 flex-1 items-center justify-between gap-3 pr-38 text-left">
 															<span className="flex min-w-0 items-center gap-2 font-mono text-sm">
 																<Icon
@@ -468,7 +467,7 @@ export function DiffImplementation({
 															/>
 														</div>
 													</Accordion.Header>
-													<Accordion.Content className="radix-state-closed:hidden">
+													<Accordion.Content className="radix-state-closed:hidden border-b">
 														<FileDiff
 															fileDiff={fileDiff}
 															options={fileDiffOptions}