can you make the output the whole height of the screen?

index.html

@@ -29,13 +29,13 @@
     </script>
 </head>
 <body class="bg-gray-900 text-gray-100 min-h-screen">
-    <div class="container mx-auto px-4 py-8">
-        <h1 class="text-3xl font-bold mb-6 text-primary-500">CodeCraft Input Symphony <span class="text-secondary-500">🎹</span></h1>
-        <div class="flex flex-col lg:flex-row gap-6">
+    <div class="container mx-auto px-4 py-4">
+<h1 class="text-3xl font-bold mb-6 text-primary-500">CodeCraft Input Symphony <span class="text-secondary-500">🎹</span></h1>
+        <div class="flex flex-col lg:flex-row gap-6 h-full">
             <!-- Left Column - Inputs -->
-            <div class="lg:w-1/3">
-                <div class="bg-gray-800 rounded-lg shadow-xl p-4 h-full">
-                    <div class="mb-4">
+            <div class="lg:w-1/3 h-full">
+                <div class="bg-gray-800 rounded-lg shadow-xl p-4 h-full flex flex-col">
+<div class="mb-4">
                         <label for="class-name" class="block text-sm font-medium text-gray-300 mb-1">Class Name</label>
                         <input type="text" id="class-name" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-gray-100 focus:border-primary-500 focus:ring-1 focus:ring-primary-500" placeholder="MyClass">
                     </div>
@@ -59,16 +59,15 @@
                             </button>
                         </div>
 </div>
-                    
-                    <button id="generate-btn" class="mt-6 w-full bg-secondary-500 hover:bg-secondary-600 text-white py-2 px-4 rounded-lg font-medium flex items-center justify-center">
-                        <i data-feather="play" class="w-4 h-4 mr-2"></i> Generate Output
+                    <button id="generate-btn" class="mt-auto w-full bg-secondary-500 hover:bg-secondary-600 text-white py-2 px-4 rounded-lg font-medium flex items-center justify-center">
+<i data-feather="play" class="w-4 h-4 mr-2"></i> Generate Output
                     </button>
                 </div>
             </div>
             <!-- Right Column - Output with Tabs -->
-<div class="lg:w-2/3">
-                <div class="bg-gray-800 rounded-lg overflow-hidden shadow-xl">
-                    <!-- Tabs -->
+<div class="lg:w-2/3 h-full">
+                <div class="bg-gray-800 rounded-lg overflow-hidden shadow-xl h-full">
+<!-- Tabs -->
                     <div class="flex border-b border-gray-700">
                         <button class="tab-btn active px-4 py-2 text-primary-500 font-medium" data-tab="output">
                             <i data-feather="file-text" class="w-4 h-4 mr-2"></i> Output
@@ -82,15 +81,15 @@
                     </div>
                     
                     <!-- Tab Content -->
-                    <div class="p-4">
-                        <div id="output" class="tab-content active">
-                            <textarea class="w-full h-96 bg-gray-800 text-gray-100 p-4 rounded-lg border border-gray-700 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 resize-none" readonly></textarea>
+                    <div class="p-4 flex-1 flex flex-col">
+                        <div id="output" class="tab-content active flex flex-col flex-1">
+                            <textarea class="w-full flex-1 bg-gray-800 text-gray-100 p-4 rounded-lg border border-gray-700 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 resize-none" readonly></textarea>
                         </div>
-                        <div id="preview" class="tab-content hidden">
-                            <div class="w-full h-96 bg-gray-800 text-gray-100 p-4 rounded-lg border border-gray-700 overflow-auto preview-content"></div>
+                        <div id="preview" class="tab-content hidden flex flex-col flex-1">
+                            <div class="w-full flex-1 bg-gray-800 text-gray-100 p-4 rounded-lg border border-gray-700 overflow-auto preview-content"></div>
                         </div>
-                        <div id="raw" class="tab-content hidden">
-                            <textarea class="w-full h-96 bg-gray-800 text-gray-100 p-4 rounded-lg border border-gray-700 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 resize-none raw-content"></textarea>
+                        <div id="raw" class="tab-content hidden flex flex-col flex-1">
+                            <textarea class="w-full flex-1 bg-gray-800 text-gray-100 p-4 rounded-lg border border-gray-700 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 resize-none raw-content"></textarea>
                         </div>
                     </div>
 </div>

style.css

@@ -1,8 +1,37 @@
+
 /* Global Styles */
 body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
+/* Full height layout */
+.container {
+    height: calc(100vh - 4rem); /* Account for padding */
+}
+
+.flex-col {
+    height: 100%;
+}
+
+.lg\\:w-1\\/3, .lg\\:w-2\\/3 {
+    height: 100%;
+}
+
+.bg-gray-800 {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.tab-content {
+    flex: 1;
+    min-height: 0;
+}
+
+textarea, .preview-content {
+    height: 100% !important;
+    min-height: 0;
+}
 /* Tab Styles */
 .tab-content {
     display: none;