style: adjust width and padding

Author: zeevenn

src/App.tsx

@@ -6,15 +6,9 @@ function App() {
   useDynamicFavicon();
 
   return (
-    <>
-      <Layout>
-        <p className="text-gray-600 dark:text-gray-200 text-center mb-8">
-          Compare files and visualize differences in real-time
-        </p>
-
-        <DiffEditor />
-      </Layout>
-    </>
+    <Layout>
+      <DiffEditor />
+    </Layout>
   );
 }
 

src/components/layout/Footer.tsx

@@ -7,7 +7,7 @@ export const Footer = ({ className = "" }: FooterProps) => {
     <footer
       className={`bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 ${className}`}
     >
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <div className="mx-auto px-4 sm:px-6 lg:px-8 py-4">
         <div className="flex flex-col md:flex-row justify-between items-center">
           <p className="text-gray-500 dark:text-gray-400 text-sm text-center">
             Diff Viewer - A simple real-time diff viewer built with monaco

src/components/layout/Header.tsx

@@ -7,7 +7,7 @@ interface HeaderProps {
 export const Header = ({ className = '' }: HeaderProps) => {
   return (
     <header className={`bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 shadow-sm ${className}`}>
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div className="mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex justify-between items-center h-16">
           {/* Logo */}
           <div className="flex items-center">

src/components/layout/Layout.tsx

@@ -13,7 +13,7 @@ export const Layout = ({ children, className = '' }: LayoutProps) => {
       <Header />
 
       {/* Main Content Area */}
-      <main className="flex-1 max-w-7xl mx-auto flex flex-col px-4 sm:px-6 lg:px-8 py-8 w-full">
+      <main className="flex-1 mx-auto flex flex-col px-4 sm:px-6 lg:px-8 py-8 w-full">
         {children}
       </main>