mirror of
https://github.com/crewAIInc/crewAI.git
synced 2026-01-08 15:48:29 +00:00
e9bf07cbdc
- 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>
48 lines
1.0 KiB
CSS
48 lines
1.0 KiB
CSS
/* Fix for Frame component width issue in installation docs */
|
|
/* Ensures file structure displays with proper width */
|
|
|
|
/* CSS Custom Properties for maintainability */
|
|
:root {
|
|
--frame-min-width: 300px;
|
|
--frame-width: 100%;
|
|
--frame-pre-min-width: 280px;
|
|
}
|
|
|
|
/* Consolidated Frame component selectors */
|
|
.frame-container,
|
|
[data-component="frame"],
|
|
.frame,
|
|
div[class*="frame"] {
|
|
min-width: var(--frame-min-width);
|
|
width: var(--frame-width);
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
|
|
}
|
|
|
|
/* Pre elements within Frame components */
|
|
.frame-container pre,
|
|
[data-component="frame"] pre,
|
|
.frame pre,
|
|
div[class*="frame"] pre {
|
|
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%;
|
|
}
|
|
}
|