fix: missing collection permission redirect to unauthorized view

packages/next/src/views/List/index.tsx

@@ -11,6 +11,7 @@ import React, { Fragment } from 'react'
 import type { AdminViewProps } from '../Root/index.js'
 import type { DefaultListViewProps, ListPreferences } from './Default/types.js'
 
+import { Unauthorized } from '../Unauthorized/index.js'
 import { DefaultListView } from './Default/index.js'
 
 export { generateListMetadata } from './meta.js'
@@ -28,6 +29,10 @@ export const ListView: React.FC<AdminViewProps> = async ({ initPageResult, searc
 
   const collectionSlug = collectionConfig?.slug
 
+  if (!permissions?.collections?.[collectionSlug]?.read?.permission) {
+    return <Unauthorized initPageResult={initPageResult} searchParams={searchParams} />
+  }
+
   let listPreferences: ListPreferences
 
   try {

packages/next/src/views/Unauthorized/UnauthorizedClient.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { Button, useTranslation } from '@payloadcms/ui'
+import { Button, Gutter, useTranslation } from '@payloadcms/ui'
 import LinkImport from 'next/link.js'
 import React from 'react'
 
@@ -9,13 +9,12 @@ export const UnauthorizedClient: React.FC<{ logoutRoute: string }> = ({ logoutRo
   const { t } = useTranslation()
 
   return (
-    <React.Fragment>
+    <Gutter>
       <h2>{t('error:unauthorized')}</h2>
-      <p>{t('error:notAllowedToAccessPage')}</p>
-      <br />
+      <div>{t('error:notAllowedToAccessPage')}</div>
       <Button Link={Link} el="link" to={logoutRoute}>
         {t('authentication:logOut')}
       </Button>
-    </React.Fragment>
+    </Gutter>
   )
 }