Fixing some browser weirdness with widths and such

templates/lesson_view.html

@@ -10,8 +10,9 @@
             color: #e0e0e0;
         }
         .container { 
-            max-width: 1000px; 
-            margin: 0 auto; 
+            max-width: 1600px; 
+            width: 95%;
+            margin: 20px auto; 
             background: #2d2d2d;
             padding: 20px;
             border-radius: 8px;
@@ -80,6 +81,8 @@
             padding: 20px;
             border-radius: 5px;
             margin: 20px 0;
+        }
+        .text-content.plain-text {
             max-height: 600px;
             overflow-y: auto;
             white-space: pre-wrap;
@@ -199,7 +202,7 @@
                 contentDiv.innerHTML = `
                     <iframe
                         src="/files/${encodeURIComponent(filePath)}"
-                        style="width: 100%; height: 800px; border: none; border-radius: 5px; background: #fff;"
+                        style="width: 100%; height: 85vh; border: none; border-radius: 5px; background: #fff;"
                         title="${filePath.split('/').pop()}"
                     ></iframe>
                 `;
@@ -223,6 +226,7 @@
                     .then(content => {
                         console.log('Content loaded successfully, length:', content.length);
                         if (contentDiv) {
+                            contentDiv.classList.add('plain-text');
                             // Check if it's HTML content
                             if (content.trim().startsWith('<') && content.includes('</')) {
                                 contentDiv.innerHTML = content;