feat: refactor control panel architecture and fix layout issues

Base class architecture improvements:
- Centralize all panel layout, styling, and behavior in ControlBase
- Implement consistent generateContent() pattern for subclasses
- Add proper flexbox layout with fixed header and scrollable content
- Standardize title styling, positioning, and scroll behavior

Panel layout fixes:
- Fix content positioning to appear inside panels instead of floating above
- Implement proper height management (expands with content up to browser height)
- Add correct scroll boundaries with only content area scrolling
- Position resize handle outside scroll area to avoid scrollbar interference

Visual improvements:
- Fix rounded border appearance with proper overflow handling
- Ensure header respects panel corner radius
- Add proper content margins and padding
- Improve resize handle positioning and visibility

Architecture standardization:
- All panels now follow same base class pattern
- Individual panels only provide configuration and content generation
- Eliminate duplicate styling and layout code across controls
- Consistent behavior across all panel types

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

testdrive-jsui/static/js/controls/contents-control.js

@@ -256,33 +256,41 @@ class ContentsControl extends ControlBase {
      * Build the control content
      * Override of base class method to provide contents-specific functionality
      */
-    buildContent() {
+
+    /**
+     * Generate contents control content (called by base class buildContent)
+     */
+    generateContent() {
+        // Extract headings first
+        this.extractHeadings();
+
         return this.safeOperation(() => {
-            // Extract headings on first build
-            this.extractHeadings();
+            return this.generateContentsHTML();
+        }, 'Error generating contents', 'generateContent');
+    }
 
-            // Generate and set content
-            const content = this.element?.querySelector('.control-content');
-            if (content) {
-                content.innerHTML = this.generateContentsHTML();
+    /**
+     * Override buildContent to add control reference and auto-refresh
+     */
+    buildContent() {
+        super.buildContent();
 
-                // Store reference to this control for onclick handlers
-                this.element.contentsControl = this;
+        // Store reference to this control for onclick handlers
+        if (this.element) {
+            this.element.contentsControl = this;
+        }
+
+        // Set up auto-refresh for dynamic content
+        if (this.updateInterval) {
+            clearInterval(this.updateInterval);
+        }
+
+        this.updateInterval = setInterval(() => {
+            const currentHeadingCount = document.querySelectorAll('h1, h2, h3, h4, h5, h6').length;
+            if (currentHeadingCount !== this.headings.length) {
+                this.refreshContents();
             }
-
-            // Set up auto-refresh for dynamic content
-            if (this.updateInterval) {
-                clearInterval(this.updateInterval);
-            }
-
-            this.updateInterval = setInterval(() => {
-                const currentHeadingCount = document.querySelectorAll('h1, h2, h3, h4, h5, h6').length;
-                if (currentHeadingCount !== this.headings.length) {
-                    this.refreshContents();
-                }
-            }, 5000); // Check every 5 seconds
-
-        }, null, 'buildContent');
+        }, 5000); // Check every 5 seconds
     }
 
     /**