Skip to content

refactor: standardize responsive breakpoints, update CSS utilities, and refine viewport configuration. - #8606

Merged
ovflowd merged 3 commits into
mainfrom
fix/style-fixes-breakpoints
Feb 5, 2026
Merged

refactor: standardize responsive breakpoints, update CSS utilities, and refine viewport configuration.#8606
ovflowd merged 3 commits into
mainfrom
fix/style-fixes-breakpoints

Conversation

@ovflowd

Copy link
Copy Markdown
Member

This PR makes a few CSS "fixes" by improving scrollbars, viewport sizes, the grid format for different viewports in some layouts, etc.

You can compare the Learn, About and Blog Post changes as those would have effectively the differences.

This PR should improve viewing in small screens, medium screens, large and extra large screens.

@ovflowd
ovflowd requested a review from a team as a code ownerFebruary 5, 2026 01:59
CopilotAI review requested due to automatic review settings February 5, 2026 01:59
@vercel

vercelBot commented Feb 5, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

ProjectDeploymentActionsUpdated (UTC)
nodejs-orgReadyReadyPreviewFeb 5, 2026 2:24am

Request Review

@github-actions

Copy link
Copy Markdown
Contributor

👋 Codeowner Review Request

The following codeowners have been identified for the changed files:

Team reviewers: @nodejs/nodejs-website

Please review the changes when you have a chance. Thank you! 🙏

@github-actions

This comment was marked as resolved.

@codecov

codecovBot commented Feb 5, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 75.03%. Comparing base (7228f53) to head (0cd429e).
⚠️ Report is 1 commits behind head on main.
✅ All tests successful. No failed tests found.

Additional details and impacted files
@@ Coverage Diff @@## main #8606 +/- ##
=======================================
Coverage 75.03% 75.03% =======================================
Files 103 103 Lines 9062 9062 Branches 312 312 =======================================
Hits 6800 6800 Misses 2260 2260 Partials 2 2 

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

CopilotAI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR standardizes responsive breakpoints across the site by replacing the custom xs breakpoint (670px) with a new ml (medium-large) breakpoint at 896px, and updating related responsive layouts to use larger breakpoint thresholds. The changes also modernize CSS utilities and improve mobile viewport configuration.

Changes:

  • Replaced xs breakpoint (670px) with ml breakpoint (896px) throughout the codebase
  • Updated responsive layouts to transition at larger screen sizes (sm→ml, lg→xl for various components)
  • Added new container sizes (8xl through 12xl) and a 3xl breakpoint (120rem) to theme configuration
  • Modernized spacing syntax from Tailwind CSS v3 theme() to v4 --spacing() notation
  • Improved viewport accessibility by removing maximumScale restriction

Reviewed changes

Copilot reviewed 24 out of 24 changed files in this pull request and generated 1 comment.

Show a summary per file
FileDescription
packages/ui-components/src/styles/theme.cssAdded new container sizes (8xl-12xl), ml and 3xl breakpoints; removed xs breakpoint and max-w-8xl utility
packages/ui-components/src/styles/markdown.cssUpdated link and code styling to use ml breakpoint instead of xs
packages/ui-components/src/Containers/Sidebar/index.module.cssChanged sidebar visibility and layout breakpoints from sm/md to ml, updated padding breakpoint from lg to 2xl
packages/ui-components/src/Containers/NavBar/index.module.cssUpdated navigation bar responsive layout from lg to xl breakpoint
packages/ui-components/src/Containers/MetaBar/index.module.cssChanged overflow-wrap property to wrap-anywhere utility and updated link styling to ml breakpoint
packages/ui-components/src/Containers/Footer/index.module.cssUpdated footer link styling to use ml breakpoint
packages/ui-components/src/Containers/Article/index.module.cssRefactored grid layout with ml and xl breakpoints, updated spacing syntax to v4 notation, changed max-width from 8xl to 10xl
packages/ui-components/src/Common/Modal/index.module.cssUpdated modal padding breakpoint from xs to ml
packages/ui-components/src/Common/Breadcrumbs/BreadcrumbRoot/index.module.cssChanged breadcrumb width breakpoint from xs to ml
packages/ui-components/src/Common/AvatarGroup/Avatar/index.module.cssUpdated avatar sizing breakpoints from xs to ml
packages/ui-components/package.jsonBumped version from 1.5.8 to 1.5.9
apps/site/pages/*/index.mdx (8 files)Updated partner list margin breakpoint from xs to ml across all locale home pages
apps/site/next.dynamic.constants.mjsChanged viewport initialScale format and removed maximumScale for better accessibility
apps/site/layouts/layouts.module.cssUpdated layout breakpoints and spacing syntax, changed overflow-wrap to wrap-anywhere
apps/site/components/withBlogCrossLinks.tsxUpdated grid column breakpoint from xs to ml
apps/site/components/withBlogCategories.tsxUpdated blog category grid breakpoint from xs to ml
apps/site/components/Releases/MinorReleasesTable/index.module.cssUpdated table border breakpoints from xs to ml

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment threadapps/site/next.dynamic.constants.mjs
@github-actions

github-actionsBot commented Feb 5, 2026

Copy link
Copy Markdown
Contributor

📦 Build Size Comparison

Summary

MetricValue
Old Total Size3.75 MB
New Total Size3.75 MB
Delta0 B (0.00%)

Changes

➕ Added Assets (1)
NameSize
.next/static/chunks/c20bc914c5995d83.js207.00 KB
➖ Removed Assets (1)
NameSize
.next/static/chunks/a0d76cf182c7f413.js207.00 KB

@ovflowd

ovflowd commented Feb 5, 2026

Copy link
Copy Markdown
MemberAuthor

Imma gonna fast-track this as bug fixes which they are (bug fix fast-tracks don't require fast-track approval)

Please feel free to review afterwards if you find any issue.

@ovflowd
ovflowd enabled auto-merge February 5, 2026 10:21
@ovflowd
ovflowd added this pull request to the merge queueFeb 5, 2026
@ovflowdovflowd added the fast-track Fast Tracking PRs label Feb 5, 2026
Merged via the queue into main with commit 45d2316Feb 5, 2026
19 checks passed
@ovflowd
ovflowd deleted the fix/style-fixes-breakpoints branch February 5, 2026 10:27
@bmuenzenmeyer

Copy link
Copy Markdown
Contributor

Reminder - fast tracking needs a 👍 from someone else, if you are the PR author

@ovflowd

Copy link
Copy Markdown
MemberAuthor

Reminder - fast tracking needs a 👍 from someone else, if you are the PR author

My understanding is that for bug fixes if there is an approval it's OK? Isn't that what's written on the guidelines? Anyhow, Ill wait then for thumbs up next times, my bad.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

fast-trackFast Tracking PRs

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants

@ovflowd@bmuenzenmeyer@aymen94@avivkeller