fix(ui): move collection description below title in document view (#13946)

### What?

Moved description rendering from DocumentFields to DocumentHeader
component.

### List view

#### Before 
<img width="1315" height="696" alt="Screenshot 2025-09-26 at 10 12
14 AM"
src="https://github.com/user-attachments/assets/9c102f4b-ed71-4e3d-85d6-87464e6c8568"
/>

#### After
<img width="1647" height="762" alt="Screenshot 2025-09-26 at 1 24 12 PM"
src="https://github.com/user-attachments/assets/1c2f4eae-5bf8-43ad-af65-23f333b01ba8"
/>


### Document View

#### Before
<img width="1321" height="673" alt="Screenshot 2025-09-26 at 10 57
01 AM"
src="https://github.com/user-attachments/assets/3c6c7218-a8f6-4e52-af27-f0c4ffa0a6ef"
/>

#### After
<img width="1645" height="682" alt="Screenshot 2025-09-26 at 1 24 29 PM"
src="https://github.com/user-attachments/assets/1ac774c7-8820-4d41-afef-c60044383474"
/>


### Document Drawer

<img width="1631" height="631" alt="Screenshot 2025-09-26 at 1 24 49 PM"
src="https://github.com/user-attachments/assets/42285d23-a37d-4419-9644-f9c27358f2bf"
/>

---
- To see the specific tasks where the Asana app for GitHub is being
used, see below:
  - https://app.asana.com/0/0/1211478222789332

test/admin/components/Banner/index.tsx

@@ -1,19 +1,15 @@
+import { Banner as PayloadBanner } from '@payloadcms/ui'
+
 export function Banner(props: {
   children?: React.ReactNode
+  className?: string
   description?: string
   message?: string
 }) {
-  const { children, description, message } = props
+  const { children, className, description, message } = props
   return (
-    <div
-      style={{
-        backgroundColor: 'var(--theme-warning-100)',
-        border: '1px dashed',
-        color: 'var(--theme-warning-750)',
-        padding: '1rem',
-      }}
-    >
+    <PayloadBanner className={className} type="success">
       {children || message || description || 'A custom banner component'}
-    </div>
+    </PayloadBanner>
   )
 }

test/admin/components/ViewDescription/index.scss

@@ -0,0 +1,3 @@
+.view-description {
+  margin-bottom: 0;
+}

test/admin/components/ViewDescription/index.tsx

@@ -6,12 +6,15 @@ import { ViewDescription as DefaultViewDescription } from '@payloadcms/ui'
 import React from 'react'
 
 import { Banner } from '../Banner/index.js'
+import './index.scss'
+
+const baseClass = 'view-description'
 
 export function ViewDescription({
   description = 'This is a custom view description component.',
 }: ViewDescriptionClientProps) {
   return (
-    <Banner>
+    <Banner className={baseClass}>
       <DefaultViewDescription description={description} />
     </Banner>
   )

test/admin/e2e/document-view/e2e.spec.ts

@@ -496,6 +496,19 @@ describe('Document View', () => {
       // Ensure the original page did not change
       expect(page.url()).toBe(currentUrl)
     })
+
+    test('document drawer displays AfterHeader components', async () => {
+      await navigateToDoc(page, postsUrl)
+      await page
+        .locator('.field-type.relationship .relationship--single-value__drawer-toggler')
+        .click()
+      await wait(500)
+      const drawer1Content = page.locator('[id^=doc-drawer_posts_1_] .drawer__content')
+      await expect(drawer1Content).toBeVisible()
+
+      const afterHeader = page.locator('[id^=doc-drawer_posts_1_] .doc-drawer__after-header')
+      await expect(afterHeader).toBeVisible()
+    })
   })
 
   describe('descriptions', () => {