fix(fe): remove stickiness of headers

[jog1t]

Fixes FRONT-872

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
rivet-inspector	Error			Nov 3, 2025 7:17pm

3 Skipped Deployments

Project	Deployment	Preview	Comments	Updated (UTC)
rivet-cloud	Ignored			Nov 3, 2025 7:17pm
rivet-site	Ignored	Preview		Nov 3, 2025 7:17pm
rivetkit-serverless	Skipped			Nov 3, 2025 7:17pm

[jog1t]

• fix(fe): beautify tabs in actor details #3309
• fix(fe): make changelog non blocking resource #3308
• fix(fe): remove stickiness of headers #3307 👈 (View in Graphite)
• docs: use correct port in examples #3306
• fix(fe): show connect page when there are no runner configs but runner names #3298 : 1 other dependent PR (#3310 )
• chore(rivetkit): log version with error logs #3303
• chore(rivetkit): log close code & reason in disconnect warning #3302
• feat(rivetkit): integrate websocket hibernation #3301
• fix: use correct vbare functions for runner tunnel #3300 : 1 other dependent PR (#3332 )
• feat(grafana): fix api dashboards #3193
• fix: docker compose build #3273
• chore: fix remaining warnings for all targets #3305
• fix(gas): fix from_workflow when creating standalone ctx from op ctx #3342
• ci: udpate ci filter to succeed if no relevant changes #3343
• main

---

How to use the Graphite Merge Queue

Add the label merge-queue to this PR to add it to the merge queue.

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[linear]

FRONT-872 Create New Project text is fixed

[claude]

PR Review: Remove Stickiness of Headers

Summary

This PR removes the sticky top-0 CSS classes from a header div in the "Create New Project" card on the Connect page (line 119). This is a simple UI improvement that removes position stickiness.

Code Quality ✅

• Clean and focused change: The change is minimal and focused on a single UI improvement
• Consistent with codebase: Looking at the rest of the file, other similar headers don't use sticky positioning (e.g., line 194, line 318), so this change improves consistency

Potential Issues 🟡

1. Missing context in PR description: The PR body is empty. It would be helpful to include:

   • Why was the sticky header causing issues? (e.g., overlapping content, scrolling problems, visual glitches)
   • Was there a user report or design decision behind this?

2. Inconsistency check: While this specific header at line 119 is being updated, I notice the companion card "Connect Existing Project" at line 194 also doesn't have sticky positioning, which suggests this change aligns with the existing pattern. Good consistency!

3. Visual regression testing: Consider testing:

   • The header behavior when scrolling within the card
   • The layout with different viewport sizes (responsive behavior)
   • Both when hasRunnerNames is false (this view) and true (the main view)

Performance Considerations ✅

• Positive impact: Removing sticky positioning can actually improve performance slightly, as sticky elements require additional browser calculations during scroll events
• Minimal change: This is purely a CSS class removal with no runtime performance implications

Security Concerns ✅

• No security implications for this change

Test Coverage 🟡

• This is a frontend visual change in a React/TSX file
• No automated tests appear to be modified or added
• Recommendation: If you have visual regression testing or E2E tests for this page, verify they still pass. The component rendering should be tested to ensure the layout still looks correct without sticky positioning

Additional Observations

1. The change affects the "Create New Project" section which is only shown when !hasRunnerNames (line 114-312)
2. The header still maintains its positioning with mt-2 flex justify-between items-center px-6 py-4, just without sticky behavior
3. This brings it in line with the other card headers in the same view

Recommendation

Approved with suggestions ✅

The change itself is good and improves consistency. However, please consider:

1. Adding a brief description in the PR body explaining why sticky positioning was problematic
2. Verifying the visual appearance across different screen sizes
3. If you have E2E or visual regression tests, ensure they pass

---

This review was generated by Claude Code

[graphite-app]

Graphite Automations

"Test" took an action on this PR • (11/03/25)

1 assignee was added to this PR based on Kacper Wojciechowski's automation.