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

@@ -67,10 +67,7 @@ class EditControl extends ControlBase {
     generateEditToolsHTML() {
         return this.safeOperation(() => {
             return `
-                <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;">Edit Tools</div>
-
-                    <!-- Document Actions -->
+                <!-- Document Actions -->
                     <div class="action-section" style="margin-bottom: 1rem;">
                         <div style="margin: 0 0 0.5rem 0; font-size: 0.9em; color: #666; font-weight: 600;">Document Actions</div>
 
@@ -180,7 +177,6 @@ class EditControl extends ControlBase {
                             ${this.unsavedChanges ? '<div style="color: #dc3545;">⚠️ Unsaved changes</div>' : ''}
                         </div>
                     </div>
-                </div>
             `;
 
         }, '<p>Error generating edit tools</p>', 'generateEditToolsHTML');
@@ -539,16 +535,25 @@ class EditControl extends ControlBase {
      * Build the control content
      * Override of base class method to provide edit-specific functionality
      */
-    buildContent() {
+    /**
+     * Generate edit control content (called by base class buildContent)
+     */
+    generateContent() {
         return this.safeOperation(() => {
-            const content = this.element?.querySelector('.control-content');
-            if (content) {
-                content.innerHTML = this.generateEditToolsHTML();
+            return this.generateEditToolsHTML();
+        }, 'Error generating edit content', 'generateContent');
+    }
 
-                // Store reference to this control for onclick handlers
-                this.element.editControl = this;
-            }
-        }, null, 'buildContent');
+    /**
+     * Override buildContent to add control reference
+     */
+    buildContent() {
+        super.buildContent();
+
+        // Store reference to this control for onclick handlers
+        if (this.element) {
+            this.element.editControl = this;
+        }
     }
 
     /**