Upload 8 files

src/views/InstructorView.js

@@ -864,17 +864,18 @@ export function setupInstructorEvents() {
 
         prompts.forEach(p => {
             const card = document.createElement('div');
-            card.className = 'bg-gray-800 rounded-xl p-4 border border-gray-700 hover:border-cyan-500 transition-colors flex flex-col h-64';
+            // Reduced height (h-64 -> h-48) and padding, but larger text inside
+            card.className = 'bg-gray-800 rounded-xl p-3 border border-gray-700 hover:border-cyan-500 transition-colors flex flex-col h-48 group';
             card.innerHTML = `
-                <div class="flex justify-between items-start mb-2">
-                    <h3 class="font-bold text-white truncate w-3/4" title="${p.title}">${p.title}</h3>
-                    <!-- Checkbox Placeholder for Phase 2 -->
-                    <input type="checkbox" class="w-5 h-5 rounded border-gray-600 text-purple-600 focus:ring-purple-500 bg-gray-700 prompt-select-checkbox cursor-pointer" 
+                <div class="flex justify-between items-start mb-1.5">
+                    <h3 class="font-bold text-white text-base truncate w-3/4" title="${p.title}">${p.title}</h3>
+                    <!-- Checkbox -->
+                    <input type="checkbox" class="w-6 h-6 rounded border-gray-600 text-purple-600 focus:ring-purple-500 bg-gray-700 prompt-select-checkbox cursor-pointer transform scale-110" 
                         data-id="${p.id}" 
                         onchange="handlePromptSelection(this)">
                 </div>
-                <div class="bg-black/30 rounded p-3 flex-1 overflow-y-auto text-xs font-mono text-green-300 mb-2 whitespace-pre-wrap">${p.prompt}</div>
-                <div class="text-[10px] text-gray-500 text-right">${p.time}</div>
+                <div class="bg-black/30 rounded p-2 flex-1 overflow-y-auto font-mono text-green-300 whitespace-pre-wrap custom-scrollbar text-base leading-snug group-hover:text-green-200 transaction-colors">${p.prompt}</div>
+                <div class="text-[10px] text-gray-500 text-right mt-1">${p.time}</div>
              `;
             container.appendChild(card);
         });
@@ -948,24 +949,25 @@ export function setupInstructorEvents() {
         const modal = document.getElementById('comparison-modal');
         const grid = document.getElementById('comparison-grid');
 
-        // Setup Grid Columns
-        let colClass = 'grid-cols-1';
-        if (items.length === 2) colClass = 'grid-cols-2';
-        if (items.length === 3) colClass = 'grid-cols-3';
+        // Setup Grid Rows (Vertical Stacking)
+        let rowClass = 'grid-rows-1';
+        if (items.length === 2) rowClass = 'grid-rows-2';
+        if (items.length === 3) rowClass = 'grid-rows-3';
 
-        grid.className = `absolute inset-0 grid ${colClass} gap-0 divide-x divide-gray-700`;
+        grid.className = `absolute inset-0 grid ${rowClass} gap-0 divide-y divide-gray-600`;
         grid.innerHTML = '';
 
         items.forEach(item => {
             const col = document.createElement('div');
-            col.className = 'flex flex-col h-full bg-gray-900 p-6';
+            // Check overflow-hidden to keep it contained, use flex-row for compact header + content
+            col.className = 'flex flex-row h-full bg-gray-900 p-4 overflow-hidden';
             col.innerHTML = `
-                <div class="mb-4 border-b border-gray-700 pb-2">
-                    <h3 class="text-lg font-bold text-cyan-400">${item.author}</h3>
-                    <p class="text-sm text-gray-400 truncate">${item.title}</p>
+                <div class="w-48 flex-shrink-0 border-r border-gray-700 pr-4 mr-4 flex flex-col justify-center">
+                    <h3 class="text-xl font-bold text-cyan-400 mb-1">${item.author}</h3>
+                    <p class="text-md text-gray-400 truncate" title="${item.title}">${item.title}</p>
                 </div>
-                <!-- Prompt Content: Large Text for reading -->
-                <div class="flex-1 overflow-y-auto font-mono text-green-300 text-lg leading-relaxed whitespace-pre-wrap p-2 hover:bg-white/5 transition-colors rounded">
+                <!-- Prompt Content: Larger Text -->
+                <div class="flex-1 overflow-y-auto font-mono text-green-300 text-2xl leading-relaxed whitespace-pre-wrap p-2 hover:bg-white/5 transition-colors rounded custom-scrollbar">
 ${item.prompt}
                 </div>
             `;