Wrap feature flags interface in admin layout structure

Layout Integration:
- Created custom admin layout wrapper with proper structure
- Added breadcrumb navigation (Dashboard › Feature Flags)
- Implemented consistent spacing and container max-width
- Added proper header hierarchy with title and description
- Ensured full-height layout with theme-aware backgrounds

Navigation Improvements:
- Added clickable breadcrumb back to Dashboard
- Maintained proper visual hierarchy with typography
- Added theme-consistent spacing and margins
- Improved responsive design with centered content container

The interface now feels like a native part of the Payload admin
panel while maintaining the spreadsheet functionality.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/views/FeatureFlagsView.tsx

@@ -1,6 +1,9 @@
 'use client'
 import { useState, useEffect, useCallback, useMemo, memo } from 'react'
-import { useConfig, useTheme } from '@payloadcms/ui'
+import {
+  useConfig,
+  useTheme
+} from '@payloadcms/ui'
 
 interface FeatureFlag {
   id: string
@@ -191,26 +194,64 @@ const FeatureFlagsViewComponent = () => {
 
   if (loading) {
     return (
-      <div style={{ padding: '2rem', textAlign: 'center', backgroundColor: styles.background, color: styles.text }}>
+      <div style={{
+        minHeight: '100vh',
+        backgroundColor: styles.background,
+        color: styles.text
+      }}>
+        <div style={{
+          maxWidth: '1200px',
+          margin: '0 auto',
+          padding: '2rem',
+          textAlign: 'center'
+        }}>
           <div style={{ fontSize: '1.125rem', color: styles.textMuted }}>Loading feature flags...</div>
         </div>
+      </div>
     )
   }
 
   return (
-    <div style={{ padding: '2rem', maxWidth: '100%', backgroundColor: styles.background, color: styles.text, minHeight: '100vh' }}>
+    <div style={{
+      minHeight: '100vh',
+      backgroundColor: styles.background,
+      color: styles.text
+    }}>
+      <div style={{
+        maxWidth: '1200px',
+        margin: '0 auto',
+        padding: '2rem'
+      }}>
         {/* Header */}
         <div style={{ marginBottom: '2rem' }}>
+          {/* Breadcrumb */}
+          <div style={{
+            fontSize: '0.875rem',
+            color: styles.textMuted,
+            marginBottom: '1rem',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '0.5rem'
+          }}>
+            <a href="/admin" style={{ color: styles.info, textDecoration: 'none' }}>Dashboard</a>
+            <span>›</span>
+            <span>Feature Flags</span>
+          </div>
+
           <h1 style={{
             fontSize: '2rem',
             fontWeight: '700',
             color: styles.text,
-          marginBottom: '0.5rem'
+            margin: '0 0 0.5rem 0'
           }}>
             Feature Flags Dashboard
           </h1>
-        <p style={{ color: styles.textMuted, fontSize: '1rem' }}>
-          Manage all feature flags in a spreadsheet view
+          <p style={{
+            color: styles.textMuted,
+            fontSize: '1rem',
+            margin: '0 0 2rem 0'
+          }}>
+            Manage all feature flags in a spreadsheet view with inline editing capabilities
           </p>
         </div>
 
@@ -294,7 +335,8 @@ const FeatureFlagsViewComponent = () => {
         backgroundColor: styles.surface,
         border: `1px solid ${styles.border}`,
         borderRadius: '0.75rem',
-        overflow: 'hidden'
+        overflow: 'hidden',
+        marginBottom: '2rem'
       }}>
         <div style={{ overflowX: 'auto' }}>
           <table style={{
@@ -591,6 +633,7 @@ const FeatureFlagsViewComponent = () => {
         </div>
       </div>
       </div>
+    </div>
   )
 }