Fixes the Settings page device width & spacing

app/(main)/settings/developers/page.tsx

@@ -20,10 +20,10 @@ export default function DevelopersPage() {
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setIsSubmitting(true);
-    
+
     // Simulate API call
     await new Promise(resolve => setTimeout(resolve, 2000));
-    
+
     setUserEmail(email);
     setVerificationStatus("pending");
     setIsSubmitting(false);
@@ -34,7 +34,7 @@ export default function DevelopersPage() {
     switch (status) {
       case "pending":
         return (
-          <Badge 
+          <Badge
             className={cn(
               "bg-yellow-500/20 text-yellow-400 border-yellow-500/30",
               "hover:bg-yellow-500/30"
@@ -46,7 +46,7 @@ export default function DevelopersPage() {
         );
       case "accepted":
         return (
-          <Badge 
+          <Badge
             className={cn(
               "bg-green-500/20 text-green-400 border-green-500/30",
               "hover:bg-green-500/30"
@@ -73,7 +73,7 @@ export default function DevelopersPage() {
   };
 
   return (
-    <div className="max-w-4xl mx-auto space-y-8">
+    <div className="space-y-8">
       {/* Header */}
       <div className="space-y-4">
         <h1 className="text-3xl font-bold text-white">Developers</h1>
@@ -113,7 +113,7 @@ export default function DevelopersPage() {
                     <span className="text-ash">{userEmail}</span>
                   </div>
                   <p className="text-sm text-ash mt-1">
-                    {verificationStatus === "pending" 
+                    {verificationStatus === "pending"
                       ? "We've sent a verification email. Please check your inbox and follow the instructions."
                       : "Your email has been verified and you have access to the developer API."
                     }

app/(main)/settings/profile/page.tsx

@@ -4,7 +4,7 @@ import { ProfileSettingsForm } from "@/components/settings/profile-settings-form
 
 export default function ProfileSettingsPage() {
   return (
-    <div className="max-w-4xl mx-auto space-y-8">
+    <div className="space-y-8">
       <div className="space-y-4">
         <h1 className="text-3xl font-bold text-white">Edit Profile</h1>
         <p className="text-ash text-lg">

app/(main)/settings/verification/page.tsx

@@ -3,7 +3,7 @@ import { Shield } from "lucide-react";
 
 export default function VerificationPage() {
   return (
-    <div className="max-w-4xl mx-auto space-y-8">
+    <div className="space-y-8">
       <div className="space-y-4">
         <h1 className="text-3xl font-bold text-white">Verification</h1>
         <p className="text-ash text-lg">

app/(main)/settings/wallet/page.tsx

@@ -28,13 +28,13 @@ export default function WalletPage() {
   };
 
   return (
-    <div className="px-8 py-4">
+    <div>
       <div className="flex flex-col gap-[10px]">
         <div className="font-bold text-[20px] text-white font-sans">Wallet</div>
-        <div className="text-[14px] text-[#8E9BAE] font-sans">
+        <p className="text-[14px] text-[#8E9BAE] font-sans">
           Select and manage your notification preferences to control how and
           when you receive updates to your email and in-app.
-        </div>
+        </p>
       </div>
       <div className="flex flex-col gap-[30px] pt-[30px]">
         <div>

components/settings/profile-settings-form.tsx

@@ -209,7 +209,7 @@ export function ProfileSettingsForm() {
   };
 
   return (
-    <div className="space-y-8 max-w-4xl mx-auto p-4">
+    <div className="space-y-8">
       {/* Cover Photo Section */}
       <Card className="bg-gray-900 border-gray-800 mb-20">
         <div className="relative">

components/settings/settings-layout.tsx

@@ -32,15 +32,15 @@ export function SettingsLayout({ children }: { children: React.ReactNode }) {
   }, [toggleSidebar]);
 
   return (
-    <div className="min-h-screen bg-true_black flex flex-col">
+    <div className="min-h-screen max-w-[1440px] mx-auto bg-true_black flex flex-col">
       <div className="flex flex-1">
         {/* Sidebar Component */}
         <SettingsSidebar isOpen={sidebarOpen} onClose={closeSidebar} />
 
         {/* Main Content */}
         <main className="flex-1 flex flex-col">
-          <div className="flex-1">
-            <div className="max-w-full mx-auto">{children}</div>
+          <div className="flex-1 py-4">
+            <div className="max-w-7xl mx-auto px-4 md:px-8">{children}</div>
           </div>
         </main>
       </div>