🐛 Add sticky position to CollapsibleHeader

[Gabriel-Bueno32]

User description

Related Issue

#741

Testing

Before	After
2025-02-17.18-07-48.mov	2025-02-17.18-09-10.mov

---

PR Type

Bug fix

---

Description

• Added position: sticky to CollapsibleHeader for desktop.

• Ensured header sticks to the top during scrolling.

---

Changes walkthrough 📝

	Relevant files
Bug fix	CollapsibleHeader.module.css Add sticky positioning to CollapsibleHeader CSS                    frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/CollapsibleHeader/CollapsibleHeader.module.css Added position: sticky to .header class. Ensures the header remains visible while scrolling. +1/-0

---

Need help?

Type /help how to ... in the comments thread for any questions about Qodo Merge usage.

Check out the documentation for more information.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 58f25d9

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
liam-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 28, 2025 11:22am

3 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
test-liam-docs	⬜️ Ignored (Inspect)	Visit Preview		Feb 28, 2025 11:22am
test-liam-erd-sample	⬜️ Ignored (Inspect)			Feb 28, 2025 11:22am
test-liam-erd-web	⬜️ Ignored (Inspect)			Feb 28, 2025 11:22am

[vercel]

@Gabriel-Bueno32 is attempting to deploy a commit to the ROUTE06 Core Team on Vercel.

A member of the Team first needs to authorize it.

[qodo-merge-pro-for-open-source]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis ✅ 741 - PR Code Verified Compliant requirements: Header should stick to the top of the desktop viewport when scrolling Fix the bug where the columns section header doesn't stick during scrolling Requires further human verification: Maintain existing mobile functionality which is working correctly - needs browser testing to verify the fix didn't affect mobile behavior

⏱️ Estimated effort to review: 1 🔵⚪⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Missing Top Value The position: sticky property requires a top value to specify where the element should stick. Without it, the sticky positioning might not work as expected. position: sticky;

[qodo-merge-pro-for-open-source]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Fix sticky header positioning Add a top: 0 property to ensure the sticky header is correctly positioned at the top of its container. frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/CollapsibleHeader/CollapsibleHeader.module.css [1-11] .header { display: grid; grid-auto-flow: column; align-items: center; justify-content: space-between; padding: var(--spacing-2); border-bottom: 1px solid var(--global-border); background-color: var(--pane-background); cursor: pointer; position: sticky; + top: 0; } Apply this suggestion Suggestion importance[1-10]: 8 __ Why: The suggestion is crucial for proper functionality as position: sticky requires a top value to work correctly. Without it, the sticky positioning would not have the intended effect of keeping the header visible during scrolling.	Medium
Update

[MH4GF]

Thanks 😄

[FunamaYukina]

Thank you, LGTM! I apologize for the inconvenience, but could you please address the conflict?🙏 (because we moved the CollapsibleHeader.module.css file)
If it is difficult to handle, please let me know and I will create a pull request on my end!