Collapse bytes output table

aocsync.py

@@ -1688,6 +1688,37 @@ class HTMLGenerator:
             font-weight: bold;
             color: #333;
         }}
+        
+        .collapsible-header {{
+            cursor: pointer;
+            user-select: none;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }}
+        
+        .collapsible-header:hover {{
+            opacity: 0.8;
+        }}
+        
+        .collapsible-arrow {{
+            display: inline-block;
+            transition: transform 0.2s ease;
+            font-size: 0.9em;
+        }}
+        
+        .collapsible-arrow.expanded {{
+            transform: rotate(90deg);
+        }}
+        
+        .collapsible-content {{
+            display: none;
+            margin-top: 10px;
+        }}
+        
+        .collapsible-content.expanded {{
+            display: block;
+        }}
     </style>
     <script>
         function showHistory(user, year, day, part) {{
@@ -1706,6 +1737,17 @@ class HTMLGenerator:
             }}
         }}
         
+        function toggleCollapsible(element) {{
+            const content = element.nextElementSibling;
+            const arrow = element.querySelector('.collapsible-arrow');
+            if (content && content.classList.contains('collapsible-content')) {{
+                content.classList.toggle('expanded');
+                if (arrow) {{
+                    arrow.classList.toggle('expanded');
+                }}
+            }}
+        }}
+        
         // Close modal when clicking outside of it
         window.onclick = function(event) {{
             if (event.target.classList.contains('modal')) {{
@@ -1963,7 +2005,11 @@ class HTMLGenerator:
         # Use the results passed to the method
         html += """
         <div class="summary">
-            <h3>Output Bytes Summary</h3>
+            <h3 class="collapsible-header" onclick="toggleCollapsible(this)">
+                <span class="collapsible-arrow">▶</span>
+                Output Bytes Summary
+            </h3>
+            <div class="collapsible-content">
             <p style="font-size: 0.9em; color: #666; margin-bottom: 10px;">Number of bytes written to stdout for each day/part/user combination</p>
             <table>
                 <thead>
@@ -2011,6 +2057,7 @@ class HTMLGenerator:
         html += """                </tbody>
             </table>
             </div>
+        </div>
 """
         
         # Add summary statistics at the bottom