Address AI crew review feedback

- Consolidate redundant CSS selectors into grouped rules
- Add CSS custom properties for better maintainability
- Implement responsive design with media queries for mobile
- Add vendor prefixes (-webkit-overflow-scrolling) for iOS
- Improve test suite with pytest fixtures to reduce redundancy
- Add better error messages and encoding specifications
- Add comprehensive test coverage for new CSS features

This addresses all actionable feedback from the AI crew review
while maintaining the core fix for Frame component width issues.

Co-Authored-By: João <joao@crewai.com>

docs/style.css

@@ -1,43 +1,47 @@
 /* Fix for Frame component width issue in installation docs */
 /* Ensures file structure displays with proper width */
-.frame-container {
+
-  min-width: 300px;
+/* CSS Custom Properties for maintainability */
-  width: 100%;
+:root {
-  overflow-x: auto;
+  --frame-min-width: 300px;
+  --frame-width: 100%;
+  --frame-pre-min-width: 280px;
 }
 
-/* Target Frame components specifically */
+/* Consolidated Frame component selectors */
-[data-component="frame"] {
+.frame-container,
-  min-width: 300px;
+[data-component="frame"],
-  width: 100%;
+.frame,
-  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;
+  min-width: var(--frame-min-width);
-  width: 100%;
+  width: var(--frame-width);
   overflow-x: auto;
+  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
 }
 
-/* Ensure pre elements inside any frame have proper styling */
+/* Pre elements within Frame components */
+.frame-container pre,
+[data-component="frame"] pre,
+.frame pre,
 div[class*="frame"] pre {
-  min-width: 280px;
+  min-width: var(--frame-pre-min-width);
   white-space: pre;
   overflow-x: auto;
 }
+
+/* Responsive design for smaller screens */
+@media screen and (max-width: 768px) {
+  .frame-container,
+  [data-component="frame"],
+  .frame,
+  div[class*="frame"] {
+    min-width: 100%;
+  }
+  
+  .frame-container pre,
+  [data-component="frame"] pre,
+  .frame pre,
+  div[class*="frame"] pre {
+    min-width: 100%;
+  }
+}

tests/docs_styling_test.py

@@ -2,39 +2,45 @@ import os
 import pytest
 from pathlib import Path
 
-def test_custom_css_file_exists():
+@pytest.fixture(scope="module")
-    """Test that the custom CSS file exists in the docs directory."""
+def css_file_path():
-    css_file = Path(__file__).parent.parent / "docs" / "style.css"
+    """Fixture providing the path to the CSS file."""
-    assert css_file.exists(), "Custom CSS file should exist in docs directory"
+    return Path(__file__).parent.parent / "docs" / "style.css"
 
-def test_frame_component_styling():
+@pytest.fixture(scope="module")
+def css_content(css_file_path):
+    """Fixture providing the CSS file content."""
+    with open(css_file_path, 'r', encoding='utf-8') as f:
+        return f.read()
+
+@pytest.fixture(scope="module")
+def mdx_file_path():
+    """Fixture providing the path to the installation MDX file."""
+    return Path(__file__).parent.parent / "docs" / "installation.mdx"
+
+def test_custom_css_file_exists(css_file_path):
+    """Test that the custom CSS file exists in the docs directory."""
+    assert css_file_path.exists(), (
+        f"Custom CSS file not found at {css_file_path}. "
+        "Please ensure style.css is present in the docs directory."
+    )
+
+def test_frame_component_styling(css_content):
     """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():
+def test_installation_mdx_has_frame_component(mdx_file_path):
     """Test that the installation.mdx file contains the Frame component."""
-    mdx_file = Path(__file__).parent.parent / "docs" / "installation.mdx"
+    with open(mdx_file_path, 'r', encoding='utf-8') as f:
-    
-    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():
+def test_css_contains_required_selectors(css_content):
     """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"]',
@@ -45,14 +51,23 @@ def test_css_contains_required_selectors():
     for selector in required_selectors:
         assert selector in css_content, f"CSS should contain selector: {selector}"
 
-def test_css_has_proper_width_properties():
+def test_css_has_proper_width_properties(css_content):
     """Test that the CSS file has proper width and overflow properties."""
-    css_file = Path(__file__).parent.parent / "docs" / "style.css"
+    assert '--frame-min-width: 300px' in css_content, "CSS should define frame min-width variable"
-    
+    assert '--frame-width: 100%' in css_content, "CSS should define frame width variable"
-    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"
+
+def test_css_values_are_valid(css_content):
+    """Validate that critical CSS values are as expected."""
+    assert '300px' in css_content, "Min-width should be 300px"
+    assert '100%' in css_content, "Width should be 100%"
+    assert 'var(--frame-min-width)' in css_content, "CSS should use custom properties"
+
+def test_responsive_design_included(css_content):
+    """Test that responsive design media queries are included."""
+    assert '@media screen and (max-width: 768px)' in css_content, "CSS should include responsive media queries"
+
+def test_vendor_prefixes_included(css_content):
+    """Test that vendor prefixes are included for better browser compatibility."""
+    assert '-webkit-overflow-scrolling: touch' in css_content, "CSS should include webkit overflow scrolling for iOS"