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/debug-control.js

@@ -423,35 +423,36 @@ class DebugControl extends ControlBase {
     }
 
     /**
-     * Build the control content
-     * Override of base class method to provide debug-specific functionality
+     * Generate debug control content (called by base class buildContent)
+     */
+    generateContent() {
+        return this.safeOperation(() => {
+            return `
+                ${this.generateSystemInfoHTML()}
+                ${this.generatePerformanceHTML()}
+                ${this.generateFilterControlsHTML()}
+                ${this.generateMessagesHTML()}
+                ${this.generateControlButtonsHTML()}
+
+                <div style="margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid #eee; font-size: 0.7rem; color: #666; text-align: center;">
+                    Recording: ${this.isRecording ? '🟢 Active' : '🔴 Paused'} |
+                    Filter: ${this.messageFilter.toUpperCase()} |
+                    Messages: ${this.getFilteredMessages().length}/${this.messages.length}
+                </div>
+            `;
+        }, 'Error generating debug content', 'generateContent');
+    }
+
+    /**
+     * Override buildContent to add control reference
      */
     buildContent() {
-        return this.safeOperation(() => {
-            const content = this.element?.querySelector('.control-content');
-            if (content) {
-                content.innerHTML = `
-                    <div style="padding: 1rem; font-size: 0.8rem;">
-                        <div style="margin-top: 0; margin-bottom: 1rem; font-weight: 600; font-size: 1.1em; color: #333;">Debug Information</div>
+        super.buildContent();
 
-                        ${this.generateSystemInfoHTML()}
-                        ${this.generatePerformanceHTML()}
-                        ${this.generateFilterControlsHTML()}
-                        ${this.generateMessagesHTML()}
-                        ${this.generateControlButtonsHTML()}
-
-                        <div style="margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid #eee; font-size: 0.7rem; color: #666; text-align: center;">
-                            Recording: ${this.isRecording ? '🟢 Active' : '🔴 Paused'} |
-                            Filter: ${this.messageFilter.toUpperCase()} |
-                            Messages: ${this.getFilteredMessages().length}/${this.messages.length}
-                        </div>
-                    </div>
-                `;
-
-                // Store reference to this control for onclick handlers
-                this.element.debugControl = this;
-            }
-        }, null, 'buildContent');
+        // Store reference to this control for onclick handlers
+        if (this.element) {
+            this.element.debugControl = this;
+        }
     }
 
     /**