From 6c8677a2d76f547a067910ccc1cfe5518b748067 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Mon, 23 Jun 2025 19:21:03 +0000
Subject: [PATCH] Fix documentation file structure component width issue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add custom CSS file (docs/style.css) to fix Frame component width
- Target Frame components with min-width: 300px to prevent collapse
- Add overflow-x: auto for horizontal scrolling when needed
- Include comprehensive CSS selectors for different Frame implementations
- Add tests (tests/docs_styling_test.py) to prevent regression
- Fixes issue #3049: file structure component has no width on installation page

The Frame component in the 'Generate Project Scaffolding' section was
collapsing due to lack of width styling. This fix ensures the file
structure displays properly with adequate width for readability.

Co-Authored-By: João <joao@crewai.com>
---
 docs/style.css             | 43 ++++++++++++++++++++++++++++
 tests/docs_styling_test.py | 58 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 101 insertions(+)
 create mode 100644 docs/style.css
 create mode 100644 tests/docs_styling_test.py

diff --git a/docs/style.css b/docs/style.css
new file mode 100644
index 000000000..071b2d4d0
--- /dev/null
+++ b/docs/style.css
@@ -0,0 +1,43 @@
+/* Fix for Frame component width issue in installation docs */
+/* Ensures file structure displays with proper width */
+.frame-container {
+  min-width: 300px;
+  width: 100%;
+  overflow-x: auto;
+}
+
+/* Target Frame components specifically */
+[data-component="frame"] {
+  min-width: 300px;
+  width: 100%;
+  overflow-x: auto;
+}
+
+/* Ensure code blocks within frames have proper width */
+.frame-container pre,
+[data-component="frame"] pre {
+  min-width: 280px;
+  white-space: pre;
+  overflow-x: auto;
+}
+
+/* Additional Frame component styling for better display */
+.frame {
+  min-width: 300px;
+  width: 100%;
+  overflow-x: auto;
+}
+
+/* Target any frame-like containers */
+div[class*="frame"] {
+  min-width: 300px;
+  width: 100%;
+  overflow-x: auto;
+}
+
+/* Ensure pre elements inside any frame have proper styling */
+div[class*="frame"] pre {
+  min-width: 280px;
+  white-space: pre;
+  overflow-x: auto;
+}
diff --git a/tests/docs_styling_test.py b/tests/docs_styling_test.py
new file mode 100644
index 000000000..dcf8edffe
--- /dev/null
+++ b/tests/docs_styling_test.py
@@ -0,0 +1,58 @@
+import os
+import pytest
+from pathlib import Path
+
+def test_custom_css_file_exists():
+    """Test that the custom CSS file exists in the docs directory."""
+    css_file = Path(__file__).parent.parent / "docs" / "style.css"
+    assert css_file.exists(), "Custom CSS file should exist in docs directory"
+
+def test_frame_component_styling():
+    """Test that the CSS file contains proper Frame component styling."""
+    css_file = Path(__file__).parent.parent / "docs" / "style.css"
+    
+    with open(css_file, 'r') as f:
+        css_content = f.read()
+    
+    assert 'frame' in css_content.lower(), "CSS should contain frame component styling"
+    assert 'min-width' in css_content, "CSS should contain min-width property"
+    assert 'overflow-x' in css_content, "CSS should contain overflow-x property"
+
+def test_installation_mdx_has_frame_component():
+    """Test that the installation.mdx file contains the Frame component."""
+    mdx_file = Path(__file__).parent.parent / "docs" / "installation.mdx"
+    
+    with open(mdx_file, 'r') as f:
+        content = f.read()
+    
+    assert '<Frame>' in content, "installation.mdx should contain Frame component"
+    assert 'my_project/' in content, "Frame should contain the file structure"
+
+def test_css_contains_required_selectors():
+    """Test that the CSS file contains all required selectors for Frame components."""
+    css_file = Path(__file__).parent.parent / "docs" / "style.css"
+    
+    with open(css_file, 'r') as f:
+        css_content = f.read()
+    
+    required_selectors = [
+        '.frame-container',
+        '[data-component="frame"]',
+        '.frame',
+        'div[class*="frame"]'
+    ]
+    
+    for selector in required_selectors:
+        assert selector in css_content, f"CSS should contain selector: {selector}"
+
+def test_css_has_proper_width_properties():
+    """Test that the CSS file has proper width and overflow properties."""
+    css_file = Path(__file__).parent.parent / "docs" / "style.css"
+    
+    with open(css_file, 'r') as f:
+        css_content = f.read()
+    
+    assert 'min-width: 300px' in css_content, "CSS should set min-width to 300px"
+    assert 'width: 100%' in css_content, "CSS should set width to 100%"
+    assert 'overflow-x: auto' in css_content, "CSS should set overflow-x to auto"
+    assert 'white-space: pre' in css_content, "CSS should preserve whitespace in pre elements"