update

frontend/src/components/layout/AppHeader.jsx

@@ -20,7 +20,7 @@ export default function AppHeader({ rightContent }) {
 
     return (
         <header className="border-b border-slate-100 bg-white/80 backdrop-blur-sm sticky top-0 z-50">
-            <div className="max-w-6xl mx-auto px-6 py-4">
+            <div className="mx-auto w-full max-w-none px-4 sm:px-5 md:px-6 lg:px-8 xl:px-10 2xl:px-12 py-4">
                 <div className="flex items-center justify-between gap-4">
                     <div className="flex items-center gap-6">
                         <div className="flex items-center gap-3">

frontend/src/components/layout/AppShell.jsx

@@ -65,7 +65,7 @@ export default function AppShell({ title, subtitle, rightContent, children }) {
 
                 <div className="flex-1 min-w-0">
                     <header className="border-b border-slate-100 bg-white/80 backdrop-blur-sm sticky top-0 z-40">
-                        <div className="max-w-6xl mx-auto px-6 py-4">
+                        <div className="mx-auto w-full px-4 sm:px-5 md:px-6 lg:px-8 xl:px-10 2xl:px-12 py-4">
                             <div className="flex items-center justify-between gap-4">
                                 <div>
                                     <h2 className="text-xl font-bold text-slate-800">{title}</h2>
@@ -91,7 +91,9 @@ export default function AppShell({ title, subtitle, rightContent, children }) {
                             </nav>
                         </div>
                     </header>
-                    <main className="max-w-6xl mx-auto px-6 py-8">{children}</main>
+                    <main className="w-full min-w-0 max-w-none mx-auto px-4 sm:px-5 md:px-6 lg:px-8 xl:px-10 2xl:px-12 py-6 md:py-8">
+                        {children}
+                    </main>
                 </div>
             </div>
         </div>

frontend/src/components/workspace/MainTableWorkspace.jsx

@@ -24,7 +24,7 @@ export default function MainTableWorkspace({
     children,
 }) {
     return (
-        <div className="space-y-4">
+        <div className="w-full min-w-0 space-y-4">
             {tabs.length > 0 && (
                 <div className="flex flex-wrap gap-2 border-b border-slate-200 pb-3">
                     {tabs.map((t) => (
@@ -46,7 +46,7 @@ export default function MainTableWorkspace({
                 </div>
             )}
 
-            <div className="flex w-full flex-col gap-3 lg:flex-row lg:items-center lg:gap-4">
+            <div className="flex w-full min-w-0 flex-col gap-3 lg:flex-row lg:items-center lg:gap-4">
                 <div className="shrink-0 order-1">
                     {primaryAction &&
                         (primaryAction.to ? (
@@ -75,8 +75,8 @@ export default function MainTableWorkspace({
                 </div>
 
                 {search && (
-                    <div className="order-3 flex flex-1 justify-center min-w-0 lg:order-2">
-                        <div className="relative w-full max-w-md">
+                    <div className="order-3 flex min-w-0 flex-1 justify-center lg:order-2">
+                        <div className="relative w-full max-w-md lg:max-w-xl xl:max-w-2xl 2xl:max-w-3xl">
                             <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400 pointer-events-none" />
                             <Input
                                 className="pl-9 border-slate-200 shadow-sm"
@@ -97,7 +97,7 @@ export default function MainTableWorkspace({
                 <div className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">{filters}</div>
             )}
 
-            <div className="border border-slate-200 rounded-xl bg-white shadow-sm overflow-visible">
+            <div className="w-full min-w-0 overflow-visible rounded-xl border border-slate-200 bg-white shadow-sm">
                 <button
                     type="button"
                     onClick={onSectionToggle}

frontend/src/pages/Contacts.jsx

@@ -595,7 +595,7 @@ export default function Contacts() {
                 onSectionToggle={() => setSectionOpen(!sectionOpen)}
                 tableToolbar={bulkToolbar}
             >
-                <div className="overflow-x-auto">
+                <div className="w-full min-w-0 overflow-x-auto">
                     {loading ? (
                         <div className="flex justify-center py-16 text-slate-500">
                             <Loader2 className="h-8 w-8 animate-spin" />

frontend/src/pages/Deals.jsx

@@ -648,7 +648,7 @@ export default function Deals() {
                 sectionOpen={sectionOpen}
                 onSectionToggle={() => setSectionOpen(!sectionOpen)}
             >
-                <div className="overflow-x-auto">
+                <div className="w-full min-w-0 overflow-x-auto">
                     {loading ? (
                         <div className="flex justify-center py-16 text-slate-500">
                             <Loader2 className="h-8 w-8 animate-spin" />

frontend/src/pages/EmailSequenceGenerator.jsx

@@ -279,7 +279,7 @@ export default function EmailSequenceGenerator() {
                 </AnimatePresence>
             {/* Footer */}
             <footer className="border-t border-slate-100 mt-16">
-                <div className="max-w-6xl mx-auto px-6 py-6">
+                <div className="w-full px-4 sm:px-5 md:px-6 lg:px-8 xl:px-10 2xl:px-12 py-6">
                     <p className="text-center text-sm text-slate-400">
                         Powered by AI • Export ready for Outreaches, Smartlead, and more
                     </p>

frontend/src/pages/Leads.jsx

@@ -393,7 +393,7 @@ export default function Leads() {
                 onSectionToggle={() => setSectionOpen(!sectionOpen)}
                 tableToolbar={bulkToolbar}
             >
-                <div className="overflow-x-auto">
+                <div className="w-full min-w-0 overflow-x-auto">
                     {loading ? (
                         <div className="flex justify-center py-16 text-slate-500">
                             <Loader2 className="h-8 w-8 animate-spin" />