Center main content horizontally

Wrap the main area in a centered max-w-7xl container and center the max-w-4xl form column inside it, so pages no longer hug the left edge on wide screens. Lists and views center up to 7xl, forms stay at a readable 4xl.

src/components/forms/DynamicForm.tsx

@@ -742,7 +742,7 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
   const sectionsToRender = buildSections(combinedForm, currentFields, isCreate, edition);
 
   return (
-    <div className="space-y-6 max-w-4xl">
+    <div className="mx-auto max-w-4xl space-y-6">
       <div className="flex items-center gap-4">
         <Button type="button" variant="ghost" size="icon" onClick={() => navigate(-1)}>
           <ArrowLeft className="h-5 w-5" />

src/pages/AdminPanel.tsx

@@ -257,9 +257,11 @@ export default function AdminPanel() {
         <main
           className={`flex-1 overflow-auto bg-content-background p-6 transition-[margin] ${sidebarOpen ? 'md:ml-64' : ''}`}
         >
+          <div className="mx-auto w-full max-w-7xl">
             <ErrorBoundary>
               <MainContent viewName={viewName} id={id} section={section} />
             </ErrorBoundary>
+          </div>
         </main>
       </div>
     </div>