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

@@ -260,6 +260,9 @@ class ControlBase {
 
                 // Style expanded panel
                 panel.style.cssText = `
+                    position: relative;
+                    display: flex;
+                    flex-direction: column;
                     background: rgba(248, 249, 250, 0.95);
                     border: 1px solid #dee2e6;
                     border-radius: 8px;
@@ -267,6 +270,10 @@ class ControlBase {
                     backdrop-filter: blur(8px);
                     min-width: 300px;
                     min-height: 200px;
+                    max-height: calc(100vh - 40px);
+                    width: auto;
+                    height: auto;
+                    overflow: hidden;
                 `;
 
                 // Style header
@@ -281,6 +288,22 @@ class ControlBase {
                         border-bottom: 1px solid #dee2e6;
                         cursor: move;
                         user-select: none;
+                        flex-shrink: 0;
+                        min-height: 40px;
+                        border-radius: 7px 7px 0 0;
+                        margin: -1px -1px 0 -1px;
+                    `;
+                }
+
+                // Style content area container
+                const contentArea = this.element.querySelector('.control-content');
+                if (contentArea) {
+                    contentArea.style.cssText = `
+                        flex: 1;
+                        overflow: hidden;
+                        display: flex;
+                        flex-direction: column;
+                        min-height: 0;
                     `;
                 }
 
@@ -512,15 +535,16 @@ class ControlBase {
         resizeHandle.style.cssText = `
             position: absolute;
             bottom: 4px;
-            right: 4px;
-            width: 8px;
-            height: 8px;
+            right: 20px;
+            width: 12px;
+            height: 12px;
             cursor: se-resize;
-            font-size: 8px;
+            font-size: 10px;
             line-height: 1;
             user-select: none;
             color: #999;
             background: transparent;
+            z-index: 10;
         `;
 
         // Add to the expanded panel
@@ -636,14 +660,55 @@ class ControlBase {
     /**
      * Build the control content (to be overridden by subclasses)
      */
+    /**
+     * Build content with consistent styling - calls subclass generateContent()
+     */
     buildContent() {
-        // Default implementation - subclasses should override this
         const content = this.element?.querySelector('.control-content');
         if (content) {
-            content.innerHTML = this.config.defaultContent;
+            // Get content from subclass
+            const innerContent = this.generateContent ? this.generateContent() : this.config.defaultContent;
+
+            // Apply consistent container styling
+            content.innerHTML = `
+                <div class="control-content-title" style="
+                    margin: 0 0 1rem 0;
+                    font-weight: 600;
+                    font-size: 1.1em;
+                    color: #333;
+                    padding: 1rem 1rem 0 1rem;
+                    flex-shrink: 0;
+                ">${this.config.title}</div>
+
+                <div class="control-content-container" style="
+                    flex: 1;
+                    overflow-y: auto;
+                    margin: 0 1rem;
+                    padding: 0 0 1rem 0;
+                    font-size: 0.8rem;
+                    box-sizing: border-box;
+                    min-height: 0;
+                    border-radius: 0 0 6px 6px;
+                ">
+                    <div class="control-content-body" style="
+                        padding: 0;
+                        margin-bottom: 25px;
+                    ">
+                        ${innerContent}
+                    </div>
+                </div>
+            `;
         }
     }
 
+    /**
+     * Generate content - subclasses should override this method
+     * @returns {string} HTML content for the panel body
+     */
+    generateContent() {
+        return this.config.defaultContent || `<p>Panel content goes here...</p>`;
+    }
+
     /**
      * Show the control
      */