Fix Academy comparison table rendering - #7936
Conversation
Signed-off-by: DS123-ally <dineshseervi33716@gmail.com>
📝 WalkthroughWalkthroughThe Academy vs Moocit comparison page now uses HTML tables with textual status values. Scoped styles define table borders, spacing, alignment, themed headers, and status-specific text styling. Both themes now define an error color. ChangesComparison table presentation
Theme color definitions
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related issues
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/collections/resources/comparison/layer5-academy-vs-moocit/index.mdx (1)
38-41: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winAdd explicit column scopes to every table header.
Each table uses
<th>withoutscope="col". Addscope="col"toFeature,Moocit,Layer5, andNotesin every<thead>.As per coding guidelines, MDX must meet WCAG 2.1 Level AA accessibility requirements and use semantic HTML.
Also applies to: 103-106, 174-177, 251-254
🤖 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 `@src/collections/resources/comparison/layer5-academy-vs-moocit/index.mdx` around lines 38 - 41, Add scope="col" to each table-header <th> element in every thead, including the headers Feature, Moocit, Layer5, and Notes in all referenced table sections. Preserve the existing header text and table structure while ensuring every column header has an explicit column scope.Source: Coding guidelines
🤖 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 `@src/collections/resources/Resources.style.js`:
- Around line 20-31: Add status-specific hooks to the comparison table cells in
the layer5 academy-versus-moocit content, preserving the Yes, Partial, and No
labels. Update the comparison styles around div.comparison td to target those
hooks and apply theme-based teal, yellow, and red colors respectively; use
data-status attributes or BEM-like class names, not generic classes.
- Around line 14-18: Update the comparison table styling around the
div.comparison table selector to prevent narrow-screen overflow by adding a
comparison__table-wrapper with horizontal auto-scrolling, or an equivalent
responsive media-query rule. Preserve the table’s native display and existing
desktop styling while ensuring long notes and multiple columns remain usable on
mobile.
---
Nitpick comments:
In `@src/collections/resources/comparison/layer5-academy-vs-moocit/index.mdx`:
- Around line 38-41: Add scope="col" to each table-header <th> element in every
thead, including the headers Feature, Moocit, Layer5, and Notes in all
referenced table sections. Preserve the existing header text and table structure
while ensuring every column header has an explicit column scope.
🪄 Autofix
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: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 519cf2a7-e7ba-4d3f-83c4-716b306f0b99
📒 Files selected for processing (2)
src/collections/resources/Resources.style.jssrc/collections/resources/comparison/layer5-academy-vs-moocit/index.mdx
Signed-off-by: DS123-ally <dineshseervi33716@gmail.com>
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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 `@src/theme/app/themeStyles.js`:
- Around line 302-304: Update the dark-theme errorColor value in themeStyles to
a lighter color such as `#FF6B6B`, ensuring its contrast against the `#121212`
background meets WCAG 2.1 AA for normal text; leave other theme colors
unchanged.
🪄 Autofix
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: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 0e2a5d19-9985-4c1e-a6cf-d222bc4cde21
📒 Files selected for processing (3)
src/collections/resources/Resources.style.jssrc/collections/resources/comparison/layer5-academy-vs-moocit/index.mdxsrc/theme/app/themeStyles.js
🚧 Files skipped from review as they are similar to previous changes (2)
- src/collections/resources/Resources.style.js
- src/collections/resources/comparison/layer5-academy-vs-moocit/index.mdx
|
@Sbragul26 okay |
Sbragul26
left a comment
Sbragul26
left a comment
There was a problem hiding this comment.
@DS123-ally, Please address the CodeRabbit comments.
okay |
Maanvi212006
left a comment
Maanvi212006
left a comment
There was a problem hiding this comment.
Please attach the issue link in the PR description. And you need to address the bot's comments (as mentioned by @Sbragul26)
You can either accept the suggestion and push changes or reject them. In either case, you need to justify your choice via a comment.
okay i will do |
Signed-off-by: DS123-ally <dineshseervi33716@gmail.com>
|
Addressed the remaining CodeRabbit feedback in
I accepted these suggestions because they improve mobile usability and WCAG semantics/contrast without changing the table content or desktop behavior. Validation completed: MDX compilation, ESLint, |
|
@Maanvi212006 @Sbragul26 can you please review now i fix the issue and updated changes. |
4 participants
**## Description Fixes the comparison tables on the Layer5 Academy vs Moocit page. Previously, the Markdown table syntax was displayed as raw text with
|characters instead of rendered rows and columns.Fixes #7935
Changes - Replaced four Markdown pipe tables with semantic MDX/HTML tables. - Added scoped styling for borders, spacing, alignment, and table headers. - Used clear
Yes,No, andPartiallabels for comparison states. - Corrected theComparisonspelling in the page frontmatter.Expected behavior The comparison content is now displayed as properly structured tables, making the features of Layer5 Academy and Moocit easier to read and compare.
Validation - MDX compilation passed. - Confirmed four
<table>elements are generated. - Confirmed no raw pipe-table rows remain. - ESLint passed for the modified stylesheet. -git diff --checkpassed.Before Comparison content appeared as raw pipe-delimited text.
After Comparison content is rendered in structured rows and columns.
## Summary by CodeRabbit
Summary by CodeRabbit * New Features * Added a clearer, more consistent comparison-table layout with improved spacing, borders, alignment, themed headers, and status colors.
*** Improved comparison labels, notes, grammar, punctuation, and metadata. * Standardized table values using “Yes,” “No,” and “Partial” for easier scanning.