\n \n+ \n

\n...existing code...\n\nstyle.css\n...existing code...\n.tab-content.active {\n- display: block;\n+ display: flex;\n+ flex-direction: column;\n}\n...existing code...\n.blockly-container {\n- height: 400px;\n+ flex: 1;\n width: 100%;\n border: 1px solid #ccc;\n+ min-height: 0;\n}\n...existing code...\n\nscript.js\n...existing code...\nwindow.addEventListener('DOMContentLoaded', () => {\n+ // will hold the last generated full HTML for copying\n+ let lastFullHTML = '';\n...existing code...\n\n// Run Code\n document.getElementById('runCodeBtn').addEventListener('click', () => {\n // Generate HTML\n let html = '';\n htmlWorkspace.getTopBlocks(true).forEach(block => {\n if (block.type === 'html_button') {\n const id = block.getFieldValue('ID');\n const text = block.getFieldValue('TEXT');\n html += ``;\n }\n });\n // Generate JS\n const jsCode = Blockly.JavaScript.workspaceToCode(jsWorkspace);\n // CSS\n const cssBg = bgPicker.value;\n // Assemble preview\n const previewFrame = document.getElementById('preview');\n const previewDoc = previewFrame.contentDocument || previewFrame.contentWindow.document;\n const fullContent = `\n\n\n\n \n \n

HTCJ Block editor