andre/crewAI
1
0
Fork 0
mirror of https://github.com/crewAIInc/crewAI.git synced 2026-01-11 00:58:30 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Address AI crew review feedback

Browse Source 
- 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>
This commit is contained in:
Devin AI
2025-06-23 19:25:16 +00:00
parent 6c8677a2d7
commit e9bf07cbdc
2 changed files with 78 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
docs/style.css
View File

@@ -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;
width: 100%;
overflow-x: auto;
/* CSS Custom Properties for maintainability */
:root {
--frame-min-width: 300px;
--frame-width: 100%;
--frame-pre-min-width: 280px;
}
/* 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 */
/* Consolidated Frame component selectors */
.frame-container,
[data-component="frame"],
.frame,
div[class*="frame"] {
min-width: 300px;
width: 100%;
min-width: var(--frame-min-width);
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%;
}
}