Fix #543: Improve documentation site responsiveness on mobile devices #601
Conversation
Added a wrapper and script to enhance API page styling.
Added responsive styles for headers, images, tables, and code blocks to improve layout on small screens.
github-actions
bot
added
UI
documentation
|
Note Currently processing new changes in this PR. This may take a few minutes, please wait... 📒 Files selected for processing (1)
Tip You can customize the tone of the review comments and chat replies.Set the WalkthroughAdds responsive CSS rules across multiple breakpoints and wraps the Python backend API reference in an Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant Browser
participant DOM
participant Script
Note over Browser: Page load begins
Browser->>DOM: Parse HTML
DOM-->>Script: DOMContentLoaded (script runs)
Script->>Browser: Add class "api-fixed-500" to body (guarded)
alt Success
Script-->>Browser: body has class, CSS rules apply (.api-500-wrapper constraints)
else Failure
Script-->>Browser: error caught, no class added
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
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 |
![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
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
docs/backend/backend_python/api.md(1 hunks)docs/stylesheets/extra.css(1 hunks)
🧰 Additional context used
🪛 Gitleaks (8.28.0)
docs/stylesheets/extra.css
[high] 260-261: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
🪛 markdownlint-cli2 (0.18.1)
docs/backend/backend_python/api.md
4-4: Hard tabs
Column: 1
(MD010, no-hard-tabs)
9-9: Hard tabs
Column: 1
(MD010, no-hard-tabs)
10-10: Hard tabs
Column: 1
(MD010, no-hard-tabs)
11-11: Hard tabs
Column: 1
(MD010, no-hard-tabs)
12-12: Hard tabs
Column: 1
(MD010, no-hard-tabs)
13-13: Hard tabs
Column: 1
(MD010, no-hard-tabs)
14-14: Hard tabs
Column: 1
(MD010, no-hard-tabs)
15-15: Hard tabs
Column: 1
(MD010, no-hard-tabs)
16-16: Hard tabs
Column: 1
(MD010, no-hard-tabs)
17-17: Hard tabs
Column: 1
(MD010, no-hard-tabs)
18-18: Hard tabs
Column: 1
(MD010, no-hard-tabs)
19-19: Hard tabs
Column: 1
(MD010, no-hard-tabs)
20-20: Hard tabs
Column: 1
(MD010, no-hard-tabs)
21-21: Hard tabs
Column: 1
(MD010, no-hard-tabs)
22-22: Hard tabs
Column: 1
(MD010, no-hard-tabs)
🔇 Additional comments (7)
docs/stylesheets/extra.css (6)
23-50: Base responsive foundations are well-structured. The image scaling (100% max-width), table horizontal scrolling, and code block wrapping follow best practices for mobile-friendly content. Padding adjustments to.md-mainand.md-contentprovide consistent breathing room across breakpoints.
52-118: Tablet and phone breakpoints scale thoughtfully. The progression from 768px (tablet) to 480px (small phones) incrementally reduces header logo size (34px → 28px → 24px), adjusts title wrapping withwhite-space: normal, and uses flex-wrap strategically. Right-aligning actions viamargin-left: autoon small phones prevents header overflow. These are solid mobile UX patterns.
120-156: 4-column home page layout reflow is well-designed. Using the attribute selector[style*="display:flex"]to target and override inline styles is pragmatic. The breakpoint progression (25% → 50% → 100%) ensures content reflows cleanly, and the h2 text alignment adjustment prevents awkward spacing on stacked layouts.
158-208: Swagger UI responsiveness covers key overlap scenarios. Flex-wrap on the topbar, word-break on text, wrapping operation summaries, and horizontal scroll on bodies/parameters prevent content overlap. The stacking at 720px ensures readability. These changes directly address the overlay issues mentioned in issue #543.
218-289: Consider the UX implications of the 500px fixed layout for the Python API page. This design constrains the header, main content, and footer to a fixed 500px pane on screens ≤500px with horizontal scrolling. While this ensures the API reference remains readable, it may feel restrictive compared to the adaptive responsive approach used elsewhere in the docs.Questions to verify:
- Is the 500px constraint necessary for the Swagger UI component to function properly, or is it a fallback?
- Have you tested the scroll behavior and UX on actual devices (iPhone SE, Pixel 7) to confirm it's not jarring?
- Should narrower devices (< 500px) fall back to full-width responsive instead of fixed-width scrolling?
If this is a deliberate choice to support legacy or very small devices, consider documenting the rationale in a comment or ADR so future maintainers understand the trade-off.
260-261: False positive from Gitleaks. Lines 260–261 are CSS selectors for.md-headerandheaderelements within the.api-fixed-500scope—not API keys or secrets. This can be safely ignored or suppressed in the security scanner configuration.docs/backend/backend_python/api.md (1)
3-5: Wrapper markup is clean and appropriate. The.api-500-wrapperclass provides a CSS hook that mirrors the styling scopes defined inextra.css. The structure maintains semantic clarity without introducing unnecessary complexity.
center elements on small mobile viewports.
|
@rahulharpal1603 check |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
docs/stylesheets/extra.css (2)
11-13: Remove redundant visibility property.When
display: noneis used, the element is removed from the document flow, makingvisibility: hiddenunnecessary. Removing it simplifies the CSS without changing behavior.
131-167: Attribute selector approach works but is fragile.Using
div[style*="display:flex"]is a pragmatic workaround for overriding inline styles in docs/index.md, and the progressive breakpoints (25% → 50% → 100%) are sensible. However, this approach is brittle—any markup change (e.g., extra spaces:display: flexinstead ofdisplay:flex) breaks the selector. If possible, consider adding a class to those divs instead (e.g.,class="home-feature-grid") to decouple styling from inline attributes.Can you verify that the inline styles in
docs/index.mduse the exact formatdisplay:flex(no spaces) to ensure the selector matches reliably?
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/stylesheets/extra.css(2 hunks)
🧰 Additional context used
🪛 Gitleaks (8.28.0)
docs/stylesheets/extra.css
[high] 271-272: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
🔇 Additional comments (7)
docs/stylesheets/extra.css (7)
34-61: Core responsive utilities look good.The image scaling, horizontal scrolling for tables/code, and content padding adjustments follow responsive design best practices. No concerns here.
64-97: Tablet breakpoint adjustments are well-structured.Responsive scaling of logo/title, flex-wrap for header, and padding adjustments follow good practices. No issues identified.
100-129: Small phone adjustments are coherent and appropriate.Progressive scaling of typography, spacing, and the use of
margin-left: autoto right-align header actions are solid techniques. No concerns.
169-219: Swagger UI responsive fixes are comprehensive and well-targeted.The rules progressively address wrapping, scrolling, and layout stacking without introducing conflicts. Good practices here.
221-227: Redoc responsive handling is consistent and minimal.Mirrors the Swagger approach appropriately.
229-300: Verify the 500px minimum-width trade-off for very small viewports.The API wrapper forces a 500px minimum width on screens ≤500px, requiring horizontal scroll rather than reflowing. This is a deliberate trade-off: API documentation stays readable at the cost of horizontal scrolling on very small devices (older phones, landscape mode).
Confirm with stakeholders that this trade-off aligns with accessibility and UX expectations. Consider whether a collapsed/accordion layout for very small screens might be preferable.
271-272: Gitleaks warning is a false positive.The static analysis flagged lines 271-272 as a "Generic API Key," but these are CSS selectors (
body.api-fixed-500 .md-footer__copyright). No credentials or secrets are present. Safe to dismiss.
|
Why are we hiding the icons? |
Removed CSS rules for hiding social icons on small mobile viewports and adjusted footer styles.
|
@rahulharpal1603 done sir .. My bad... I didn't see the structure properly |
rahulharpal1603
left a comment
rahulharpal1603
left a comment
There was a problem hiding this comment.
Thanks @suryansh00001 !
2 participants
🐞 Related Issue
Fixes #543
📋 Summary
This PR fixes overlapping content and layout issues in the documentation site when viewed on smaller screens.
💡 Changes Made
✅ Testing
Summary by CodeRabbit
Style
Bug Fixes