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>

tests/docs_styling_test.py

@@ -2,39 +2,45 @@ 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"
+@pytest.fixture(scope="module")
+def css_file_path():
+    """Fixture providing the path to the CSS file."""
+    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, 'r') as f:
+    with open(mdx_file_path, 'r', encoding='utf-8') 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"
-    
-    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 '--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"
     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"