fix(ui): improve collection description layout and spacing

[danicaleroo]

What / Why

Collection descriptions had poor visual separation and spacing issues:

• In list view: description was too close to the collection heading
• In edit view: description appeared mixed with form fields, making it look like a regular field instead of a description section

This made descriptions less readable and visually confusing.

Changes introduced

• packages/ui/src/elements/DocumentFields/index.tsx
  • Moved description header outside of Gutter component to create proper visual separation
• packages/ui/src/elements/DocumentFields/index.scss
  • Added &__header styles with padding and borders to create a distinct section
  • Added responsive padding adjustments for mid-break screens
• packages/ui/src/elements/ListHeader/index.scss
  • Added gap to .list-header to improve spacing between title and description
  • Added responsive gap adjustment for smaller screens

Behavior after the fix

• List view: Collection descriptions now have proper spacing from the heading
• Edit view: Descriptions appear in a visually distinct header section, separated from form fields
• Responsive: Appropriate spacing adjustments on smaller screens

How to test manually

1. Run pnpm dev admin to see admin test collections with descriptions
2. OR run pnpm dev and add a collection description inside test/_community/collections/Posts/index.ts
3. List view: Observe improved spacing between title and description
4. Edit view: Notice description appears in a bordered header section, separate from form fields
5. Test on different screen sizes to verify responsive behavior

Screenshots

List View - Before/After

Edit View - Before/After

[DanRibbens]

Thanks for including the screenshots making this review easy.

[danicaleroo]

My pleasure!

[Patrickroelofs]

I wanted to open a bug report about the description on Global collections, I find it being in a very strange position, did that possibly improve in this PR?