mirror of
https://github.com/crewAIInc/crewAI.git
synced 2026-01-10 16:48:30 +00:00
6c8677a2d7
- 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>
44 lines
894 B
CSS
44 lines
894 B
CSS
/* 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;
|
|
}
|