feat: create css-only responsive table #8098
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull Request Overview
This PR implements CSS-only responsive tables that adapt to different screen sizes using media queries and data attributes. The main change transforms tables from traditional grid layout on desktop to card-based layout on mobile screens.
- Creates mobile-friendly table layouts that stack information vertically on small screens
- Adds automatic data-label attributes to table cells via a remark plugin
- Updates existing table component to use internationalized labels
Reviewed Changes
Copilot reviewed 5 out of 6 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/ui-components/src/styles/markdown.css | Implements responsive table CSS with mobile card layout and desktop grid styles |
| apps/site/util/table.ts | Creates remark plugin to automatically add data-label attributes to table cells |
| apps/site/package.json | Adds required dependencies for markdown processing utilities |
| apps/site/next.mdx.plugins.mjs | Integrates the new table plugin into the MDX processing pipeline |
| apps/site/components/Releases/PreviousReleasesTable.tsx | Updates table component to use internationalized data-labels and fix rendering issues |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8098 +/- ##
=======================================
Coverage 75.89% 75.89%
=======================================
Files 112 112
Lines 9433 9433
Branches 303 303
=======================================
Hits 7159 7159
Misses 2273 2273
Partials 1 1 ☔ View full report in Codecov by Sentry. |
| <> | ||
| <tr key={release.major}> | ||
| <td data-label="Version">v{release.major}</td> | ||
| <Fragment key={release.major}> |
There was a problem hiding this comment.
This fixes the error Each child in a list should have a unique "key" prop.
There was a problem hiding this comment.
(Shameless plug here, disclaimer: I wrote this package, so no need to use it if you don't want)
There was a problem hiding this comment.
I think it's a good idea. Your implementation already has tests, etc., but let's see what the rest of the team thinks first
|
Can you add text wrapping on the title? |
araujogui
force-pushed
the
feat/responsive-table2
branch
from
01ba72a to
38cccee
Compare
Description
Create CSS-only responsive table
Validation
Related Issues
Fixes #7656
Check List
pnpm formatto ensure the code follows the style guide.pnpm testto check if all tests are passing.pnpm buildto check if the website builds without errors.