frontend update

frontend/src/components/Layout.jsx

@@ -57,7 +57,7 @@ const Layout = ({ children }) => {
         </Toolbar>
       </AppBar>
       
-      <Container maxWidth="lg" sx={{ py: 4 }}>
+      <Container maxWidth="xl" sx={{ py: 4, px: { xs: 2, sm: 3, md: 4 } }}>
         {children}
       </Container>
     </Box>

frontend/src/components/VideoGenerator.jsx

@@ -63,17 +63,17 @@ const VideoGenerator = () => {
   };
 
   return (
-    <Box>
-      <Grid container spacing={3}>
+    <Box sx={{ width: '100%' }}>
+      <Grid container spacing={{ xs: 2, sm: 3, md: 4 }}>
         {/* Left Column - Video Form */}
         <Grid item xs={12} lg={6}>
-          <VideoForm 
-            onSubmit={handleFormSubmit} 
+          <VideoForm
+            onSubmit={handleFormSubmit}
             isGenerating={isGenerating}
             userJobs={userJobs}
           />
         </Grid>
-        
+
         {/* Right Column - Queue Manager */}
         <Grid item xs={12} lg={6}>
           <QueueManager userEmail={getUserEmail()} />