fix(blog): improve responsive post layout#525
Merged
Merged
Conversation
Refine blog typography, headers, cards, table of contents, and mobile layout. Keep the author metadata and image updates together with the shared presentation changes.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
✅ Deploy Preview for canarychecker canceled.
|
|
Warning Review limit reached
Next review available in: 42 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (4)
WalkthroughChangesBlog layout and presentation
Sequence Diagram(s)sequenceDiagram
participant BlogPostPage
participant BlogPostProvider
participant BlogPostPageContent
participant BlogPostItem
participant BlogLayout
BlogPostPage->>BlogPostProvider: provide blog content
BlogPostProvider->>BlogPostPageContent: render page content
BlogPostPageContent->>BlogPostItem: pass children and optional TOC
BlogPostPageContent->>BlogLayout: render article layout and sidebar
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
✨ Simplify code
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: 7
🧹 Nitpick comments (1)
common/src/theme/BlogPostItem/styles.module.css (1)
22-22: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueConsider using media-feature range notation for stylelint compliance.
Stylelint flags
@media (max-width: 996px)and prefers the range notation@media (width <= 996px). If the project enforces this rule, update the syntax. If Docusaurus conventions take precedence, this can be safely ignored.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@common/src/theme/BlogPostItem/styles.module.css` at line 22, Update the `@media` query in the BlogPostItem stylesheet to use range notation, replacing the max-width feature with the equivalent width <= 996px syntax while preserving the existing responsive styles.Source: Linters/SAST tools
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@AGENTS.md`:
- Around line 24-25: Update the changed documentation text in AGENTS.md to
capitalize the acronym consistently as “YAML,” replacing both lowercase and
mixed-case variants while preserving the existing meaning.
In `@common/src/css/custom.css`:
- Around line 312-318: Replace the 100vw-based width and max-width declarations
in the .blog-post-page .theme-code-block selectors with container-relative 100%
values, preserving min-width: 0 so the code block and its nested elements remain
within the available ancestor width.
In `@common/src/theme/BlogPostItem/Header/styles.module.css`:
- Line 1: Rename the CSS module selectors to kebab-case: update .postHeader to
.post-header and .postInfo to .post-info in
common/src/theme/BlogPostItem/Header/styles.module.css at lines 1 and 10, and
update their references in Header/index.js to styles['post-header'] and
styles['post-info']. Rename .postTitle to .post-title in
common/src/theme/BlogPostItem/Header/Title/styles.module.css at line 5, and
update Title/index.js to use styles['post-title'].
In `@common/src/theme/BlogPostItem/Header/Title/styles.module.css`:
- Around line 5-13: Add a mobile media-query override for .title.postTitle so
its font size is reduced to the intended mobile value at screens up to 576px,
overriding the selector’s desktop 48px declaration while preserving the existing
desktop styling.
In `@common/src/theme/BlogPostItem/index.js`:
- Line 9: Remove the redundant “apply a bottom margin in list view” comment near
useContainerClassName, leaving the implementation unchanged.
In `@common/src/theme/BlogPostItem/styles.module.css`:
- Line 2: Replace the BlogPostItem width declaration using 100vw with a
100%-based width calculation so the element fits the visible container without
including scrollbar width, while preserving the existing 2rem spacing
adjustment.
In `@common/src/theme/BlogPostPage/index.js`:
- Around line 40-42: Remove the early return-null statement from
BlogPostPaginator so execution reaches and renders its existing nav JSX. Keep
the current nextItem/prevItem props and surrounding conditional rendering
unchanged.
---
Nitpick comments:
In `@common/src/theme/BlogPostItem/styles.module.css`:
- Line 22: Update the `@media` query in the BlogPostItem stylesheet to use range
notation, replacing the max-width feature with the equivalent width <= 996px
syntax while preserving the existing responsive styles.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: f9123085-a055-41ec-bc2d-1e12e7157b53
⛔ Files ignored due to path filters (2)
mission-control/static/img/aditya.jpgis excluded by!**/*.jpgmission-control/static/img/flanksource/team/aditya-thebe.pngis excluded by!**/*.png
📒 Files selected for processing (17)
AGENTS.mdcommon/src/components/Card.jsxcommon/src/css/custom.csscommon/src/theme/BlogPostItem/Card/index.jscommon/src/theme/BlogPostItem/Footer/index.jscommon/src/theme/BlogPostItem/Header/Authors/index.jscommon/src/theme/BlogPostItem/Header/Title/index.jscommon/src/theme/BlogPostItem/Header/Title/styles.module.csscommon/src/theme/BlogPostItem/Header/index.jscommon/src/theme/BlogPostItem/Header/styles.module.csscommon/src/theme/BlogPostItem/index.jscommon/src/theme/BlogPostItem/styles.module.csscommon/src/theme/BlogPostItems/index.jscommon/src/theme/BlogPostPage/index.jscommon/src/theme/TagsListInline/index.jsmission-control/blog/authors.ymlstyles/ignore/words-with-suggestions.txt
Code blocks used viewport-relative widths and post titles retained their desktop size on narrow screens, which could cause horizontal overflow. Use container-relative sizing and an equally specific mobile title override. Restore the existing paginator navigation by removing its early null return, and remove the redundant list-margin comment.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Refine blog typography, headers, cards, table of contents, and mobile layout.
Keep the author metadata and image updates together with the shared presentation changes.
Summary by CodeRabbit
New Features
UI Improvements