Make file name in diffs sticky (vibe-kanban) (#1631)

* Perfect! I've successfully implemented sticky file name headers for the diffs view. Here's a summary of the changes:

## Summary

I've made the file name headers in the diffs view sticky by modifying the `DiffCard` component:

### Changes Made

**File**: `frontend/src/components/DiffCard.tsx:269`

Added the following CSS classes to the header div:
- `sticky` - Makes the header stick to the top when scrolling
- `top-0` - Positions it at the very top of the scroll container
- `z-[5]` - Sets appropriate z-index to ensure it stays above diff content but below the main panel header (which has z-10)
- `bg-background` - Adds background color so content scrolling underneath is covered
- `border-b` - Adds a bottom border for better visual separation

### How It Works

When users scroll down through the diffs in the DiffsPanel, each file header will now:
1. Stick to the top of the viewport as you scroll past it
2. Stay visible so users always know which file diff they're viewing
3. Get replaced by the next file's header when that file reaches the top
4. Maintain proper layering with the main panel header staying on top

The z-index hierarchy is:
- Main panel header (DiffsPanel): `z-10` (highest)
- Individual diff card headers: `z-[5]` (middle)
- Diff content: default (lowest)

This ensures a smooth scrolling experience where users can always see which file they're looking at, even when viewing large diffs.

* delete package-lock.json
This commit is contained in:
Anastasiia Solop
2025-12-22 14:42:06 +01:00
committed by GitHub
parent 3c35b92a97
commit 36fbf7e12c

View File

@@ -266,7 +266,7 @@ export default function DiffCard({
return ( return (
<div className="my-4 border"> <div className="my-4 border">
<div className="flex items-center px-4 py-2"> <div className="sticky top-0 z-[5] flex items-center px-4 py-2 bg-background border-b">
{expandable && ( {expandable && (
<Button <Button
variant="ghost" variant="ghost"