Fix documentation file structure component width issue

- 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>

docs/style.css

@@ -0,0 +1,43 @@
+/* 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;
+}