styling for desktop updated

pages/index.js

@@ -310,8 +310,8 @@ export default function Home() {
         />
 
         <div className="absolute inset-0 top-[57px] sm:top-[73px] overflow-y-auto overscroll-y-contain -webkit-overflow-scrolling-touch">
-          <div className={`flex flex-col md:flex-row gap-4 max-w-6xl mx-auto pb-20 ${!hasStartedGenerating ? 'justify-center' : ''}`}>
-            <div className={`w-full md:flex-1 py-12 px-3 ${!hasStartedGenerating ? 'md:max-w-2xl mx-auto' : ''}`}>
+          <div className={`flex flex-col md:flex-row gap-4 max-w-7xl mx-auto pb-20 ${!hasStartedGenerating ? 'justify-center' : ''} md:h-[calc(100vh-73px)] md:overflow-hidden`}>
+            <div className={`w-full md:w-6/12 py-4 md:py-12 px-3 ${!hasStartedGenerating ? 'md:max-w-2xl mx-auto' : ''}`}>
               <section className="flex flex-col bg-gray-100 rounded-2xl p-4">
                 <div
                   {...getRootProps()}
@@ -437,7 +437,7 @@ export default function Home() {
             </div>
 
             {hasStartedGenerating && (
-              <div className="w-full md:flex-1 py-4 md:py-20 px-3 animate-slide-in">
+              <div className="w-full md:w-6/12 py-4 md:py-12 px-3 animate-slide-in md:overflow-y-auto md:h-full">
                 {loading ? (
                   // Loading skeletons for code previews
                   Array(concurrentRequests).fill().map((_, index) => (