fix: update collection drawer styles COMPASS-9477

[paula-stacho]

Description

The figma for our project is not up to date, Ben has been doing some redesigns as the edit project is crystallizing - but this shouldn't be too far from the final version and at least with this we'll have the main part of the UI ready for internal review on dev.

Checklist

• New tests and/or benchmarks are included
• Documentation is changed or added
• If this change updates the UI, screenshots/videos are added and a design review is requested
• I have signed the MongoDB Contributor License Agreement (https://www.mongodb.com/legal/contributor-agreement)

Motivation and Context

• Bugfix
• New feature
• Dependency update
• Misc

Open Questions

Dependents

Types of changes

• Backport Needed
• Patch (non-breaking change which fixes an issue)
• Minor (non-breaking change which adds functionality)
• Major (fix or feature that would cause existing functionality to change)

[Copilot]

Pull Request Overview

This PR updates the collection drawer styles in the data modeling component to match a new design. The changes implement a more structured accordion-based layout with improved visual organization and interaction patterns.

• Updates collection drawer to use accordion-style layout with sections for collection details and relationships
• Redesigns relationship management interface with inline edit/delete buttons and improved visual hierarchy
• Adds utility function for generating relationship display names

Reviewed Changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/compass-data-modeling/test/fixtures/flights-model.json	Adds a name field to test fixture relationship for testing
packages/compass-data-modeling/src/utils.ts	Creates utility function for generating relationship display names
packages/compass-data-modeling/src/components/relationship-drawer-content.tsx	Moves delete button to accordion header and updates styling
packages/compass-data-modeling/src/components/diagram-editor-side-panel.spec.tsx	Updates tests to match new UI structure and element locations
packages/compass-data-modeling/src/components/collection-drawer-content.tsx	Complete redesign with accordion layout and improved relationship list
packages/compass-components/src/components/accordion.tsx	Adds buttonTextClassName prop for additional styling flexibility

Comments suppressed due to low confidence (1)

packages/compass-data-modeling/src/components/collection-drawer-content.tsx:68

• Using float: 'right' is an outdated CSS practice. Consider using flexbox with justify-content: 'flex-end' or margin-left: 'auto' instead for better maintainability and modern CSS practices.

  textOverflow: 'ellipsis',

[gribnoysup]

One note on the border color, but otherwise looks awesome!

[gribnoysup]

Still missing a dark mode color for the border here