Fix docs mobile responsiveness: prevent horizontal overflow, wrap lon… #763
Conversation
|
|
WalkthroughA single CSS file is updated to improve text wrapping and overflow handling across the documentation. Changes include global overflow-wrap rules for text content, wrapping for headings, scrollable tables, wrapped inline and block code, and a minor structural fix to footer meta styling. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes
Possibly related PRs
Suggested labels
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
|
1 similar comment
|
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
docs/stylesheets/extra.css (2)
77-142: Media query breakpoints lack cohesion; consider consolidation.The stylesheet uses multiple, inconsistent breakpoints (480px, 540px, 600px, 720px, 768px, 900px, 500px) spread across different sections. This makes maintenance harder and can lead to overlapping or conflicting rules.
Consider adopting a consistent breakpoint strategy (e.g., mobile-first with unified thresholds: 480px for phones, 768px for tablets, 1024px for desktops). Organize all rules for a given breakpoint together to improve readability and reduce duplication. For example:
/* Mobile: up to 480px */ @media (max-width: 480px) { /* all 480px and below rules */ } /* Tablet: 481px to 768px */ @media (max-width: 768px) { /* all 768px and below rules that don't overlap with mobile */ }
1-376: Excessive use of!importantflags throughout—consider refactoring for specificity.The stylesheet relies heavily on
!importantdeclarations, particularly in media queries and footer rules (e.g., lines 149–151, 164, 172, 250, 288–293, 319–363). While sometimes necessary when overriding framework defaults, this pattern can:
- Make future maintenance and cascading harder
- Signal that selector specificity may not be sufficient
- Hide dependency on external framework rule strength
Review whether increasing selector specificity or restructuring rule order could eliminate most
!importantflags. For example, instead of:.md-typeset > div[style*="display:flex"] { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 0.5rem; }You might use a more specific selector or a utility class without
!important. This becomes more important if the documentation framework or Material for MkDocs is ever upgraded, as it will be more resilient to cascade changes.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
frontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (1)
docs/stylesheets/extra.css(2 hunks)
🔇 Additional comments (6)
docs/stylesheets/extra.css (6)
33-41: Heading text wrapping rules are appropriate.Applying explicit wrapping rules to all heading levels ensures predictable behavior on small viewports and prevents heading overflow—a common issue on mobile.
51-55: Tabledisplay: blockapproach enables responsiveness with a trade-off.Converting tables to
display: blockwithoverflow-x: autois a pragmatic pattern for responsive tables, though it changes table semantics on small screens. Ensure your documentation doesn't rely on visual table alignment or complex nested tables that might become difficult to parse horizontally.Verify that no documentation tables use complex layouts (merged cells, nested structures) that could be negatively affected by this conversion.
186-232: Swagger UI responsive fixes are comprehensive and well-scoped.The Swagger UI updates effectively address overflow and wrapping for API documentation, including flex-wrap, word-break, and scrollable containers. The approach is methodical and reduces layout breakage on small screens.
247-313: API wrapper scoped fix is pragmatic but somewhat fragile.The 500px fixed-width wrapper for the Python API page is a targeted workaround. While it solves an immediate responsiveness issue for that specific page, it introduces:
- A page-specific CSS class dependency (
api-fixed-500)- Hard-coded width that may need adjustment if the API spec changes
- Additional cascading rules for header/footer/main elements
Document why this 500px constraint exists and consider whether a more general responsive approach could eventually replace it.
339-370: Footer meta centering logic is clear and intentional.The footer styling correctly centers social icons and copyright text on mobile, with appropriate flex and block display rules. The use of
!importanthere is justified given the need to override existing framework styles.
25-30: Global text wrapping approach is solid for overflow prevention.The combination of
overflow-wrap: anywhereandword-break: break-wordis an effective strategy for preventing horizontal overflow while maintaining readability. This provides a good baseline for responsive typography.
overflow-wrap: anywherehas solid support in modern browsers (Chrome 80+, Firefox 65+, Safari 15.4+), though older browsers like IE do not support it. Since your code already includes theword-break: break-wordfallback, coverage is reasonable for most users. If your project needs to support older browsers or IE, consider adding the legacyword-wrap: break-wordalias for maximum compatibility.
| /* Inline code should also wrap to avoid pushing layout */ | ||
| .md-typeset code:not(pre code) { | ||
| white-space: break-spaces; | ||
| word-break: break-word; | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
CSS white-space: break-spaces browser support compatibility
💡 Result:
Short answer
- white-space: break-spaces is supported in modern Chrome, Edge, Firefox and Safari (recent versions) but not in Internet Explorer or older browsers. [1][2]
Compatibility (high-level)
- Supported: Chrome 76+ (full), Firefox 69+ (full), Safari 13.1+ / iOS Safari 13.4+, current Edge versions, most up‑to‑date mobile browsers. [1][2]
- Not supported: Internet Explorer (all versions) and many older browser releases — use a fallback for broad compatibility. [2]
Recommended fallback
Use a fallback that preserves spaces but degrades gracefully (keeps spaces but may not allow break-after-every-space):
.example {
white-space: pre-wrap; /* fallback /
white-space: break-spaces; / modern browsers /
word-break: break-word; / optional: allow breaking if needed */
}
Notes
- break-spaces differs from pre-wrap by allowing a break opportunity after every preserved whitespace and by preserving trailing spaces in layout — behavior matters for intrinsic sizing. See spec/details. [1]
Sources
[1] MDN — white-space (and white-space-collapse) documentation.
[2] Can I Use — "white-space: break-spaces" compatibility table.
🏁 Script executed:
# Search for browser support documentation or requirements in the project
find . -type f \( -name "*.md" -o -name "*.txt" -o -name "*.json" \) | head -20 | xargs grep -l "browser" -i 2>/dev/null | head -10Repository: AOSSIE-Org/PictoPy
Length of output: 79
🏁 Script executed:
# Check project configuration files for browser target information
git ls-files | grep -E "(package\.json|\.browserslistrc|browserslist|\.babelrc|\.eslintrc)" | head -10Repository: AOSSIE-Org/PictoPy
Length of output: 146
🏁 Script executed:
# Look for any documentation about compatibility or browser support
git ls-files | grep -iE "(compatibility|support|browser)" | head -10Repository: AOSSIE-Org/PictoPy
Length of output: 104
🏁 Script executed:
cat -n ./CONTRIBUTING.md | head -100Repository: AOSSIE-Org/PictoPy
Length of output: 3181
🏁 Script executed:
cat -n ./frontend/src/components/BrowserWarning.tsxRepository: AOSSIE-Org/PictoPy
Length of output: 2985
🏁 Script executed:
# Check if browserslist is defined in any package.json
rg "browserslist" --type jsonRepository: AOSSIE-Org/PictoPy
Length of output: 2630
🏁 Script executed:
# Check the extra.css file for any fallbacks or browser-specific rules
cat -n docs/stylesheets/extra.css | head -80Repository: AOSSIE-Org/PictoPy
Length of output: 2229
🏁 Script executed:
# Check if there's a .browserslistrc in the docs folder
fd ".browserslistrc" docs/Repository: AOSSIE-Org/PictoPy
Length of output: 44
🏁 Script executed:
# Check mkdocs.yml for any browser/compatibility mentions
rg "browser|compatibility|support" docs/mkdocs.yml 2>/dev/null || cat docs/mkdocs.yml | head -50Repository: AOSSIE-Org/PictoPy
Length of output: 109
🏁 Script executed:
# Check if Material theme documentation or config specifies browser support
rg -i "material|theme" mkdocs.yml | head -20Repository: AOSSIE-Org/PictoPy
Length of output: 157
white-space: break-spaces lacks a fallback for older browser compatibility.
The CSS property is supported in Chrome 76+, Firefox 69+, Safari 13.1+, and modern Edge, but not in Internet Explorer or older browser versions. Consider adding white-space: pre-wrap as a fallback if broader browser support is needed:
.md-typeset code:not(pre code) {
white-space: pre-wrap; /* fallback for older browsers */
white-space: break-spaces; /* modern browsers */
word-break: break-word;
}If the documentation site intentionally targets modern browsers only, this change is optional.
🤖 Prompt for AI Agents
In docs/stylesheets/extra.css around lines 64 to 68, the rule using white-space:
break-spaces lacks a fallback for older browsers; add white-space: pre-wrap
before white-space: break-spaces so older browsers use the fallback while modern
browsers get break-spaces, keeping the existing word-break: break-word line
unchanged.
|
@HardikMathur11 Please link the corresponding issue. |
|
Thanks! 10 points will be awarded. |
* Update Manual Setup Guide to include Miniconda installation instructions (AOSSIE-Org#971) * Update conda create command's flags * Fix docs mobile responsiveness: prevent horizontal overflow, wrap long text (AOSSIE-Org#763) Co-authored-by: Hardik Mathur <hardikmathur11@gmial.com> * fix: upgrade pre-commit hooks for ruff and black and reformated some files acc to new versions (AOSSIE-Org#1073) * feat: Implemented spawing and closing of backend & sync microservice from tauri application --------- Co-authored-by: Hardik Mathur <hardikmathur11@gmail.com> Co-authored-by: Hardik Mathur <hardikmathur11@gmial.com> Co-authored-by: Tushar Gupta <36126341+tushar1977@users.noreply.github.com> Co-authored-by: Tushar Gupta <tushar.197712@gmail.com>
…g text (AOSSIE-Org#763) Co-authored-by: Hardik Mathur <hardikmathur11@gmial.com>
2 participants
Mobile responsiveness issues in PictoPy documentation
Description
The PictoPy documentation website had responsiveness issues on smaller screen sizes.
On mobile and narrow viewports, content overflowed horizontally and important UI
elements were partially hidden, making the documentation difficult to read and navigate.
This PR improves the responsive layout to ensure the documentation renders correctly
across different screen sizes.
Current Behavior
Changes Implemented
Screenshots
Before
After
Testing
Impact
These changes significantly improve usability and accessibility of the documentation
for mobile users and enhance overall user experience.
Hackathon Note
This contribution is made as part of the Unstoppable Hackathon.
closses issue #734