[Bug]: No way to resize the code block in Docker's playground

[PhantasWeng]

crawl4ai version

0.6.0 with local build docker

Expected Behavior

When the number of program parameters increases, it should be able to display them all completely.

Current Behavior

When the content exceeds the height of the field, you can continue typing, but the text will not be visible.

Is this reproducible?

Yes

Inputs Causing the Bug

Steps to Reproduce

1. Enter the playground in Docker.
2. Add multiple line parameter values that exceed the field range.

Code snippets

OS

macOs

Python version

lasted docker

Browser

Chrome

Browser version

No response

Error logs & Screenshots (if applicable)

[SohamKukreti]

Hey, thanks for raising this issue, we will work on it and fix it in the next release!

Root Cause Analysis

Problem Summary

When users add multiple line parameter values that exceed the field range in the Docker playground's Advanced Config editor, they can continue typing but the text becomes invisible.

Root Cause

The issue is in line 270 of /deploy/docker/static/playground/index.html:

<div id="adv-editor" class="mt-2 border border-border rounded overflow-hidden h-40"></div>

Three Contributing Factors:

1. Fixed Height (h-40): The Tailwind class h-40 sets a fixed height of 160px (10rem), which is insufficient for multi-line parameter configs

2. No Scrolling (overflow-hidden): The overflow-hidden class prevents the content from being scrollable when it exceeds the container height

3. No CodeMirror Height Config: The CodeMirror editor initialization (lines 451-464) doesn't have a height or maxHeight option configured, so it relies entirely on the container's fixed height

What Happens:

• When users type parameters that exceed 160px height, the content continues to exist in CodeMirror's internal buffer
• However, it's not visible because the container is too small and doesn't scroll
• Users can type "blind" but can't see what they're typing

---

💡 Potential Solutions

Solution 1: Make it Scrollable (Quick Fix)

Replace the container div to allow scrolling:

<!-- Change from: -->
<div id="adv-editor" class="mt-2 border border-border rounded overflow-hidden h-40"></div>

<!-- To: -->
<div id="adv-editor" class="mt-2 border border-border rounded overflow-auto h-40"></div>

Pros: Simple one-line fix, maintains same initial height
Cons: Still limited to 160px view, requires scrolling

---

Solution 2: Increase Height (Better)

Increase the default height to accommodate more content:

<div id="adv-editor" class="mt-2 border border-border rounded overflow-auto h-64"></div>

(h-64 = 256px instead of 160px)

Pros: More visible content area
Cons: Takes more screen space, still fixed height

---

Solution 3: Dynamic/Resizable Height (BEST ⭐)

Make the editor resizable and auto-expand.

A) Add CSS for resize capability:

<style>
    /* Add to existing <style> section around line 46 */
    #adv-editor {
        resize: vertical;
        min-height: 160px;
        max-height: 500px;
    }
    
    .CodeMirror {
        height: 100% !important;
    }
</style>

<!-- Update container -->
<div id="adv-editor" class="mt-2 border border-border rounded overflow-auto" style="height: 160px;"></div>

B) Update CodeMirror config to use viewportMargin:

const cm = CodeMirror(document.getElementById('adv-editor'), {
    value: `CrawlerRunConfig(
    stream=True,
    cache_mode=CacheMode.BYPASS,
)`,
    mode: 'python',
    lineNumbers: true,
    theme: 'darcula',
    tabSize: 4,
    styleActiveLine: true,
    matchBrackets: true,
    gutters: ["CodeMirror-linenumbers"],
    lineWrapping: true,
    viewportMargin: Infinity,  // ← ADD THIS: renders entire document
});

Pros:

• Users can manually resize the editor
• Maintains compact initial view
• Professional UX pattern (similar to GitHub, VS Code)

Cons: Requires CSS + JS changes

---

Solution 4: Auto-expanding Height (Most User-Friendly)

Make the editor auto-expand to fit content:

<style>
    #adv-editor .CodeMirror {
        height: auto !important;
        min-height: 160px;
        max-height: 400px;
    }
    
    #adv-editor .CodeMirror-scroll {
        overflow-y: auto !important;
        max-height: 400px;
    }
</style>

<div id="adv-editor" class="mt-2 border border-border rounded overflow-auto"></div>

Pros:

• Automatically grows with content
• No manual resizing needed
• Best UX for varying content sizes

Cons: May take unexpected screen space on very long configs

---

📋 Recommended Implementation

Solution 3 (Dynamic/Resizable) is recommended as it provides the best balance:

• ✅ Starts at reasonable height (doesn't take too much space initially)
• ✅ Users can manually resize if needed
• ✅ Scrollable when content exceeds height
• ✅ Professional UX pattern familiar to developers
• ✅ Predictable behavior

Implementation Files:

• /deploy/docker/static/playground/index.html
  • Update line 270 (container div)
  • Add CSS in <style> section (around line 46)
  • Update CodeMirror init (around line 451)