Improve console layout and responsiveness

Updated `console.css` to enhance the layout and responsiveness of the console interface. Adjusted the console container to utilize the full viewport height while maintaining a controlled height for the console wrapper. Changed console output positioning to relative for better spacing and positioned the stats bar at the bottom for consistency. Added a new JavaScript function `adjustConsoleLayout` to dynamically calculate and set the height of the console wrapper based on viewport size, improving user experience across different screen sizes.

static/css/console.css

@@ -81,17 +81,15 @@ body {
     }
 }
 
-/* Update container to use specific heights rather than 100vh */
+/* Fix the console container to use the full viewport */
 .console-container {
     display: flex;
     flex-direction: column;
-    height: 100vh; /* Keep this */
+    height: 100vh;
     width: 100%;
     max-width: 100%;
     background: transparent;
     animation: flicker 4s infinite;
-    /* Add this to ensure proper sizing */
-    box-sizing: border-box;
 }
 
 .console-header {
@@ -113,21 +111,18 @@ body {
     font-size: 18px;
 }
 
-/* Update the wrapper to have a controlled height */
+/* Fix the console wrapper to be a controlled height */
 .console-wrapper {
-    flex: 1;
+    flex: 0 1 auto; /* Don't allow this to grow arbitrarily */
     overflow-y: auto;
     scrollbar-width: thin;
     scrollbar-color: var(--console-text) var(--console-bg);
     padding: 10px;
-    max-width: 900px;
+    max-width: 100%;
-    width: 100%; /* Add this */
+    width: 100%;
-    margin: 0 auto; /* Uncomment this */
     position: relative;
-    /* Add these properties to control height */
-    max-height: calc(100vh - 150px); /* Adjust based on header + stats height */
-    min-height: 150px;
     box-sizing: border-box;
+    background-color: var(--console-bg);
 }
 
     .console-wrapper::-webkit-scrollbar {
@@ -144,18 +139,13 @@ body {
         box-shadow: 0 0 5px rgba(247, 147, 26, 0.8);
     }
 
-/* Fix the console output positioning */
+/* Update the console output */
 .console-output {
     font-size: 20px;
     white-space: pre-wrap;
     word-break: break-word;
-    /* Change from absolute to relative positioning */
+    position: relative; /* Change to relative positioning */
-    position: relative;
-    bottom: auto;
     width: 100%;
-    height: 100%;
-    /* Add this for better spacing */
-    padding-bottom: 10px;
     box-sizing: border-box;
 }
 
@@ -173,16 +163,17 @@ body {
         text-shadow: 0 0 5px rgba(247, 147, 26, 0.8);
     }
 
-/* Ensure the stats bar has a fixed height */
+/* Make the stats bar stay at the bottom */
 .console-stats {
     border-top: 1px solid var(--console-text);
     padding: 15px;
     box-shadow: 0 0 15px rgba(247, 147, 26, 0.5);
     background-color: var(--console-header);
-    /* Add this to ensure it has a consistent height */
+    position: relative;
-    height: auto;
+    bottom: 0;
-    min-height: 80px;
+    width: 100%;
     box-sizing: border-box;
+    margin-top: auto; /* Push to the bottom of flexbox */
 }
 
 .stats-container {

static/js/console.js

@@ -472,3 +472,36 @@ function generateRandomHex(length) {
     }
     return result;
 }
+
+// Add this function to your console.js file - this will fix the layout issue
+function adjustConsoleLayout() {
+    // Get the elements
+    const container = document.querySelector('.console-container');
+    const header = document.querySelector('.console-header');
+    const stats = document.querySelector('.console-stats');
+    const wrapper = document.querySelector('.console-wrapper');
+    const output = document.querySelector('.console-output');
+
+    if (container && header && stats && wrapper && output) {
+        // Calculate available height for the wrapper
+        const viewportHeight = window.innerHeight;
+        const headerHeight = header.offsetHeight;
+        const statsHeight = stats.offsetHeight;
+        const wrapperHeight = viewportHeight - headerHeight - statsHeight - 2; // 2px for borders
+
+        // Apply the calculated height to the wrapper
+        wrapper.style.height = `${wrapperHeight}px`;
+        wrapper.style.maxHeight = `${wrapperHeight}px`;
+        wrapper.style.position = 'relative';
+
+        // Make the output relative instead of absolute
+        output.style.position = 'relative';
+        output.style.bottom = 'auto';
+    }
+}
+
+// Call the function on load and whenever the window is resized
+document.addEventListener('DOMContentLoaded', function () {
+    adjustConsoleLayout();
+    window.addEventListener('resize', adjustConsoleLayout);
+});