fix: admin mobile drawer scroll, theme-color viewport export, custom.scss

src/app/(frontend)/layout.tsx

@@ -1,4 +1,4 @@
-import type { Metadata } from 'next'
+import type { Metadata, Viewport } from 'next'
 import { AnnouncementBarComponent } from '@/components/AnnouncementBar/AnnouncementBar'
 import { cn } from '@/utilities/ui'
 import { GeistMono } from 'geist/font/mono'
@@ -49,8 +49,6 @@ export default async function RootLayout({ children }: { children: React.ReactNo
         <InitTheme />
         <link href="/favicon.ico" rel="icon" sizes="32x32" />
         <link href="/favicon.svg" rel="icon" type="image/svg+xml" />
-        <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
-        <meta name="theme-color" content="#0e2338" media="(prefers-color-scheme: dark)" />
         <meta name="apple-mobile-web-app-status-bar-style" content="default" />
         <HeadInjection siteSettings={siteSettings} />
       </head>
@@ -93,3 +91,10 @@ export const metadata: Metadata = {
     creator: '@payloadcms',
   },
 }
+
+export const viewport: Viewport = {
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: '#ffffff' },
+    { media: '(prefers-color-scheme: dark)', color: '#0e2338' },
+  ],
+}

src/app/(payload)/custom.scss

@@ -0,0 +1,69 @@
+// ============================================================
+// Payload Admin — Mobile improvements
+// Safe overrides only — additive CSS, no structural changes
+// ============================================================
+
+@media (max-width: 768px) {
+
+  // ---- Block drawer / list drawer -------------------------
+  // Make the drawer take full height and scroll properly
+
+  .list-drawer__content,
+  .list-drawer__wrap {
+    max-height: 100dvh !important;
+    overflow-y: auto !important;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  // Block chooser modal that appears when adding a block
+  .block-selection,
+  .blocks-field__drawer-content {
+    max-height: 85dvh !important;
+    overflow-y: auto !important;
+    -webkit-overflow-scrolling: touch;
+    padding-bottom: 2rem;
+  }
+
+  // The drawer itself — ensure it doesn't clip content
+  .drawer__content {
+    max-height: 100dvh !important;
+    overflow-y: auto !important;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  // Block selection grid — stack to single column on small screens
+  .block-selection__blocks {
+    grid-template-columns: 1fr !important;
+  }
+
+  // ---- General admin nav / header -------------------------
+
+  // Prevent horizontal scroll on the main admin UI
+  .template-default,
+  .collection-list,
+  .document-fields {
+    overflow-x: hidden;
+  }
+
+  // Ensure action buttons in header don't overflow
+  .doc-controls__controls {
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  // ---- Field labels / inputs ------------------------------
+
+  // Give fields a bit more breathing room on mobile
+  .field-type {
+    margin-bottom: 1rem;
+  }
+
+  // ---- Table / list view ----------------------------------
+
+  // Make collection list tables scroll horizontally
+  .table-wrap,
+  .list-controls__wrap {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}