From 36fbf7e12c3667515d385c1e966aaaa5ebdb8002 Mon Sep 17 00:00:00 2001
From: Anastasiia Solop <35258279+anastasiya1155@users.noreply.github.com>
Date: Mon, 22 Dec 2025 14:42:06 +0100
Subject: [PATCH] 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
---
 frontend/src/components/DiffCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/DiffCard.tsx b/frontend/src/components/DiffCard.tsx
index 42d8f9ad..55d700fa 100644
--- a/frontend/src/components/DiffCard.tsx
+++ b/frontend/src/components/DiffCard.tsx
@@ -266,7 +266,7 @@ export default function DiffCard({
 
   return (
     <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 && (
           <Button
             variant="ghost"