Fix code block overflow when callout boxes are on the same slide

Author: jeremymanning

src/cdl_slides/assets/themes/cdl-theme.css

@@ -3713,6 +3713,55 @@ section.table-compact td {
     padding: 0.2em 0.4em !important;
 }
 
+/* ============================================
+   CODE BLOCKS + CALLOUT BOXES COEXISTENCE
+   When code blocks share a slide with callout boxes,
+   reduce code block max-height and font-size to prevent
+   overlap. Uses preprocessor-injected classes.
+   ============================================ */
+
+section.has-code-block.has-callouts-1,
+section.has-code-block.has-callouts-2,
+section.has-code-block.has-callouts-3 {
+    display: flex !important;
+    flex-direction: column !important;
+    overflow: hidden !important;
+}
+
+section.has-code-block.has-callouts-1 > pre,
+section.has-code-block.has-callouts-1 > :is(pre, marp-pre) {
+    max-height: 45vh !important;
+    flex-shrink: 1 !important;
+    overflow: hidden !important;
+}
+
+section.has-code-block.has-callouts-2 > pre,
+section.has-code-block.has-callouts-2 > :is(pre, marp-pre) {
+    max-height: 35vh !important;
+    font-size: 16pt !important;
+    flex-shrink: 1 !important;
+    overflow: hidden !important;
+}
+
+section.has-code-block.has-callouts-3 > pre,
+section.has-code-block.has-callouts-3 > :is(pre, marp-pre) {
+    max-height: 25vh !important;
+    font-size: 14pt !important;
+    flex-shrink: 1 !important;
+    overflow: hidden !important;
+}
+
+section.has-code-block[class*="has-callouts"] > .callout,
+section.has-code-block[class*="has-callouts"] > .note-box,
+section.has-code-block[class*="has-callouts"] > .example-box,
+section.has-code-block[class*="has-callouts"] > .warning-box,
+section.has-code-block[class*="has-callouts"] > .tip-box,
+section.has-code-block[class*="has-callouts"] > .important-box,
+section.has-code-block[class*="has-callouts"] > .definition-box {
+    flex-shrink: 0 !important;
+    flex-grow: 0 !important;
+}
+
 /* ============================================
    ELEMENT-LEVEL SCALING (wrap individual elements)
    Usage: <div class="sized-70">...</div>

src/cdl_slides/preprocessor.py

@@ -961,13 +961,13 @@ def replace_arrow(match):
 # Content height weights (approximate units where 1 unit ~ 30px)
 CONTENT_WEIGHTS = {
     # Recalibrated based on visual inspection of actual slides
-    # A slide with H1 + 2 callout boxes + 4 list items should estimate ~10 units (uses ~50% of slide)
+    # A slide with H1 + 2 callout boxes + 4 list items should estimate ~14 units (uses ~70% of slide)
     "h1": 2.0,
     "h2": 1.8,
     "h3": 1.5,
     "paragraph_per_50_chars": 0.4,  # Reduced - text wraps efficiently
     "list_item": 0.7,  # Reduced - list items are compact
-    "callout_box_base": 2.5,  # Reduced - callout overhead is smaller than estimated
+    "callout_box_base": 4.5,  # Each callout box ~80-90px (title + padding + content)
     "callout_content_per_50_chars": 0.3,
     "code_block_line": 0.6,  # Code lines are relatively compact
     "table_header": 1.2,
@@ -998,6 +998,21 @@ def replace_arrow(match):
 }
 
 
+def _estimate_callout_content_height(slide_content: str) -> float:
+    """Estimate additional height from text content inside callout boxes."""
+    total = 0.0
+    callout_pattern = re.compile(
+        r'<div\s+class="[^"]*(?:note|warning|tip|example|definition|important|callout)-box[^"]*"'
+        r"[^>]*>(.*?)</div>",
+        re.DOTALL,
+    )
+    for match in callout_pattern.finditer(slide_content):
+        content = match.group(1)
+        text_only = re.sub(r"<[^>]+>", "", content).strip()
+        total += (len(text_only) / 50) * CONTENT_WEIGHTS["callout_content_per_50_chars"]
+    return total
+
+
 def compute_available_code_lines(slide_content: str, default_max: int = 20) -> int:
     """
     Compute max code lines for a slide based on other content and scale class.
@@ -1020,6 +1035,7 @@ def compute_available_code_lines(slide_content: str, default_max: int = 20) -> i
         other_height += CONTENT_WEIGHTS["h1"]
 
     callout_height = metrics["callout_count"] * CONTENT_WEIGHTS["callout_box_base"]
+    callout_height += _estimate_callout_content_height(slide_content)
     list_height = metrics["list_items"] * CONTENT_WEIGHTS["list_item"]
 
     if metrics["has_two_column"] and metrics["callout_count"] >= 2:
@@ -1314,6 +1330,32 @@ def inject_scale_class(slide_content: str, scale_class: str) -> str:
     return "\n".join(lines)
 
 
+def inject_layout_classes(slide_content: str, classes: list) -> str:
+    """Inject layout helper classes into the slide's _class directive."""
+    if not classes:
+        return slide_content
+
+    existing_class = re.search(r"<!--\s*_class:\s*([^>]*)\s*-->", slide_content)
+    if existing_class:
+        old_directive = existing_class.group(0)
+        old_classes = existing_class.group(1).strip()
+        new_classes = [c for c in classes if c not in old_classes]
+        if not new_classes:
+            return slide_content
+        new_directive = f"<!-- _class: {old_classes} {' '.join(new_classes)} -->"
+        return slide_content.replace(old_directive, new_directive)
+
+    lines = slide_content.split("\n")
+    insert_idx = 0
+    for i, line in enumerate(lines):
+        if line.strip():
+            insert_idx = i
+            break
+
+    lines.insert(insert_idx, f"<!-- _class: {' '.join(classes)} -->")
+    return "\n".join(lines)
+
+
 def analyze_and_warn_slides(content, filename="unknown"):
     """
     Analyze all slides in content and generate warnings.
@@ -1354,6 +1396,13 @@ def analyze_and_warn_slides(content, filename="unknown"):
             )
             slide = inject_scale_class(slide, scale_class)
 
+        layout_classes = []
+        if metrics["callout_count"] > 0 and metrics["has_code_block"]:
+            layout_classes.append(f"has-callouts-{min(metrics['callout_count'], 3)}")
+            layout_classes.append("has-code-block")
+        if layout_classes:
+            slide = inject_layout_classes(slide, layout_classes)
+
         modified_parts.append(slide)
 
     # Rejoin with slide separators

tests/test_preprocessor.py

@@ -5,8 +5,10 @@
 from cdl_slides.preprocessor import (
     PYGMENTS_AVAILABLE,
     analyze_slide_content,
+    compute_available_code_lines,
     determine_scale_class,
     highlight_code_line,
+    inject_layout_classes,
     parse_flow_node,
     process_arrow_syntax,
     process_flow_blocks,
@@ -408,3 +410,62 @@ def test_malformed_animate_produces_warning(self, copy_fixture_to_work, work_dir
         process_markdown(str(src), str(output))
         result = output.read_text(encoding="utf-8")
         assert "warning-box" in result or "```animate" in result
+
+
+class TestCodeBlockWithCallouts:
+    def test_available_lines_reduced_with_one_callout(self):
+        slide_no_callout = "<!-- _class: scale-80 -->\n# Title\n\n```python\nx = 1\n```\n"
+        slide_one_callout = (
+            "<!-- _class: scale-80 -->\n# Title\n\n```python\nx = 1\n```\n\n"
+            '<div class="note-box">\nSome note.\n</div>\n'
+        )
+        lines_no_callout = compute_available_code_lines(slide_no_callout, default_max=30)
+        lines_one_callout = compute_available_code_lines(slide_one_callout, default_max=30)
+        assert lines_one_callout < lines_no_callout
+
+    def test_available_lines_reduced_with_two_callouts(self):
+        slide_one = (
+            "<!-- _class: scale-80 -->\n# Title\n\n```python\nx = 1\n```\n\n"
+            '<div class="note-box">\nSome note.\n</div>\n'
+        )
+        slide_two = (
+            "<!-- _class: scale-80 -->\n# Title\n\n```python\nx = 1\n```\n\n"
+            '<div class="note-box">\nSome note.\n</div>\n\n'
+            '<div class="example-box">\nSome example.\n</div>\n'
+        )
+        lines_one = compute_available_code_lines(slide_one)
+        lines_two = compute_available_code_lines(slide_two)
+        assert lines_two < lines_one
+
+    def test_layout_classes_injected_for_code_and_callouts(self):
+        from cdl_slides.preprocessor import analyze_and_warn_slides
+
+        content = (
+            "---\nmarp: true\ntheme: cdl-theme\n---\n\n"
+            "# Title\n\n"
+            "```python\nx = 1\n```\n\n"
+            '<div class="note-box">\nNote.\n</div>\n\n'
+            '<div class="example-box">\nExample.\n</div>\n'
+        )
+        modified, warnings = analyze_and_warn_slides(content)
+        assert "has-callouts-2" in modified
+        assert "has-code-block" in modified
+
+    def test_no_layout_classes_without_code_block(self):
+        from cdl_slides.preprocessor import analyze_and_warn_slides
+
+        content = (
+            "---\nmarp: true\ntheme: cdl-theme\n---\n\n"
+            "# Title\n\n"
+            '<div class="note-box">\nNote.\n</div>\n\n'
+            '<div class="example-box">\nExample.\n</div>\n'
+        )
+        modified, warnings = analyze_and_warn_slides(content)
+        assert "has-callouts" not in modified
+
+    def test_layout_classes_appended_to_existing_scale(self):
+        slide = "<!-- _class: scale-80 -->\n# Title\n\n```python\nx=1\n```\n"
+        result = inject_layout_classes(slide, ["has-callouts-1", "has-code-block"])
+        assert "scale-80" in result
+        assert "has-callouts-1" in result
+        assert "has-code-block" in result