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 76.58% 76.59% +0.01%
==========================================
Files 115 115
Lines 9602 9602
Branches 322 322
==========================================
+ Hits 7354 7355 +1
+ Misses 2247 2246 -1
Partials 1 1 ☔ View full report in Codecov by Sentry. |
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
There was a problem hiding this comment.
I'm neutral, always a bit vary in adopting a small used/new package to the mixture, but we have Dependabot.
|
Can you add text wrapping on the title? |
araujogui
force-pushed
the
feat/responsive-table2
branch
from
01ba72a to
38cccee
Compare
araujogui
force-pushed
the
feat/responsive-table2
branch
from
38cccee to
d9f70ff
Compare
|
CC @nodejs/nodejs-website |
github-actions
bot
removed
the
github_actions:pull-request
| * Remark plugin that adds data-label attributes to table cells (td) | ||
| * based on their corresponding table headers (th). | ||
| */ | ||
| export default function remarkTableTitles() { |
|
Lighthouse Results
|
|
I just looked the latest commit, is it supposed to look like this? 
|
|
(Looks a bit weird tho) |
It's a bug, i'll take a look |
|
@ovflowd it's fixed |
Should we really do elipsis text? Not better just having it being multi-line? |
I can remove the truncate, but it's the default behavior on |
Can we use multiple columns instead of one 'Version Informations' column? this will simplify things |
araujogui
force-pushed
the
feat/responsive-table2
branch
from
5d70b8d to
b4f2d0b
Compare
It's fixed @ovflowd, can you take another look? |
One last bug, text is overflowing? |
@araujogui are the two bottom rows supposed to be right padded? |
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.