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

apps/site/components/Releases/MinorReleasesTable/index.module.css

@@ -20,12 +20,12 @@
     overflow-y-auto;
 
   table {
-    @apply xs:border-t-0
+    @apply ml:border-t-0
       border-t;
   }
 
   th {
-    @apply xs:border-t
+    @apply ml:border-t
       border-neutral-200
       dark:border-neutral-800;
   }

apps/site/components/withBlogCategories.tsx

@@ -31,7 +31,7 @@ const WithBlogCategories: FC<WithBlogCategoriesProps> = ({
         tabs={categories}
         activeTab={blogData.category}
       >
-        <div className="max-xs:grid-cols-[1fr] grid grid-cols-[repeat(auto-fill,minmax(--spacing(80),1fr))] [grid-gap:--spacing(12)_--spacing(8)]">
+        <div className="max-ml:grid-cols-[1fr] grid grid-cols-[repeat(auto-fill,minmax(--spacing(80),1fr))] [grid-gap:--spacing(12)_--spacing(8)]">
           {blogData.posts.map(post => (
             <BlogPostCard
               key={post.slug}

apps/site/components/withBlogCrossLinks.tsx

@@ -28,7 +28,7 @@ const WithBlogCrossLinks: FC = () => {
   ];
 
   return (
-    <div className="max-xs:grid-cols-1 mt-4 grid w-full grid-cols-2 gap-4">
+    <div className="max-ml:grid-cols-1 mt-4 grid w-full grid-cols-2 gap-4">
       {(previousCrossLink && (
         <CrossLink
           type="previous"

apps/site/layouts/layouts.module.css

@@ -53,7 +53,7 @@
         }
 
         small {
-          @apply max-xs:text-xs
+          @apply max-ml:text-xs
             text-center
             text-sm
             text-neutral-600
@@ -97,8 +97,8 @@
 .downloadLayout {
   @apply bg-gradient-subtle
     dark:bg-gradient-subtle-dark
-    max-xs:bg-none
-    max-xs:dark:bg-none
+    max-ml:bg-none
+    max-ml:dark:bg-none
     flex
     w-full
     justify-center;
@@ -136,22 +136,22 @@
 
 .contentLayout {
   @apply max-w-8xl
-    max-xs:m-0
-    max-xs:block
+    max-ml:m-0
+    max-ml:block
     mx-auto
     grid
     w-full
     grid-rows-[1fr]
-    sm:grid-cols-[1fr_theme(spacing.52)]
-    xl:grid-cols-[1fr_theme(spacing.80)];
+    sm:grid-cols-[1fr_--spacing(52)]
+    xl:grid-cols-[1fr_--spacing(80)];
 
   > *:nth-child(1) {
     @apply bg-gradient-subtle
       dark:bg-gradient-subtle-dark
-      max-xs:border-l-0
-      max-xs:bg-none
-      max-xs:pb-4
-      max-xs:dark:bg-none
+      max-ml:border-l-0
+      max-ml:bg-none
+      max-ml:pb-4
+      max-ml:dark:bg-none
       flex
       w-full
       justify-center
@@ -166,15 +166,15 @@
     main {
       @apply max-w-[660px]
         gap-4
-        [overflow-wrap:_anywhere];
+        wrap-anywhere;
     }
   }
 
   > *:nth-child(2) {
-    @apply xs:mt-0
-      xs:max-w-xs
-      xs:border-l
-      xs:border-t-0
+    @apply ml:mt-0
+      ml:max-w-xs
+      ml:border-l
+      ml:border-t-0
       mt-8
       border-t;
   }

apps/site/next.dynamic.constants.mjs

@@ -74,6 +74,5 @@ export const PAGE_VIEWPORT = {
     },
   ],
   width: 'device-width',
-  initialScale: 1,
-  maximumScale: 2,
+  initialScale: '1.0',
 };

apps/site/pages/en/index.mdx

@@ -27,7 +27,7 @@ layout: home
         <small className="!text-xs">for EOL Node.js versions</small>
       </Button>
 
-      <div className="flex justify-center xs:mt-3">
+      <div className="flex justify-center ml:mt-3">
         <PartnersList sort="weight" />
       </div>
       <span className="text-center text-sm! text-neutral-800 dark:text-neutral-600 text-balance">Node.js is proudly supported by the partners above <Link href="/about/partners">and more</Link>.</span>

apps/site/pages/fr/index.mdx

@@ -27,7 +27,7 @@ layout: home
         <small className="!text-xs">pour les versions Node.js en fin de vie</small>
       </Button>
 
-      <div className="flex justify-center xs:mt-3">
+      <div className="flex justify-center ml:mt-3">
         <PartnersList sort="weight" />
       </div>
 

apps/site/pages/id/index.mdx

@@ -29,7 +29,7 @@ layout: home
         <small className="!text-xs">untuk versi Node.js yang telah mencapai EOL</small>
       </Button>
 
-      <div className="flex justify-center xs:mt-3">
+      <div className="flex justify-center ml:mt-3">
         <PartnersList sort="weight" />
       </div>
 

apps/site/pages/ja/index.mdx

@@ -27,7 +27,7 @@ layout: home
         <small className="!text-xs">EOLバージョン用</small>
       </Button>
 
-      <div className="flex justify-center xs:mt-3">
+      <div className="flex justify-center ml:mt-3">
         <PartnersList sort="weight" />
       </div>
 

apps/site/pages/pt-br/index.mdx

@@ -27,7 +27,7 @@ layout: home
         <small className="!text-xs">para versões EOL do Node.js</small>
       </Button>
 
-      <div className="flex justify-center xs:mt-3">
+      <div className="flex justify-center ml:mt-3">
         <PartnersList sort="weight" />
       </div>
 

apps/site/pages/ro/index.mdx

@@ -29,7 +29,7 @@ layout: home
         <small className="!text-xs">pentru versiunile Node.js EOL</small>
       </Button>
 
-      <div className="flex justify-center xs:mt-3">
+      <div className="flex justify-center ml:mt-3">
         <PartnersList sort="weight" />
       </div>
 

apps/site/pages/uk/index.mdx

@@ -28,7 +28,7 @@ layout: home
         <small className="!text-xs">для версій Node.js, які досягли кінця підтримки (EOL)</small>
       </Button>
 
-      <div className="flex justify-center xs:mt-3">
+      <div className="flex justify-center ml:mt-3">
         <PartnersList sort="weight" />
       </div>
 

apps/site/pages/zh-cn/index.mdx

@@ -28,7 +28,7 @@ layout: home
         <small className="!text-xs">对于不受支持的 Node.js 版本（EOL）</small>
       </Button>
 
-      <div className="flex justify-center xs:mt-3">
+      <div className="flex justify-center ml:mt-3">
         <PartnersList sort="weight" />
       </div>
 

packages/ui-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@node-core/ui-components",
-  "version": "1.5.8",
+  "version": "1.5.9",
   "type": "module",
   "exports": {
     "./*": [

packages/ui-components/src/Common/AvatarGroup/Avatar/index.module.css

@@ -1,8 +1,8 @@
 @reference "../../../styles/index.css";
 
 .item {
-  @apply xs:max-h-10
-    xs:max-w-10
+  @apply ml:max-h-10
+    ml:max-w-10
     flex
     h-full
     max-h-12
@@ -25,13 +25,13 @@
   @apply size-8;
 
   .wrapper {
-    @apply max-xs:block
-      max-xs:py-0;
+    @apply max-ml:block
+      max-ml:py-0;
   }
 }
 
 .small {
-  @apply xs:size-8
+  @apply ml:size-8
     size-10;
 }
 

packages/ui-components/src/Common/Breadcrumbs/BreadcrumbRoot/index.module.css

@@ -1,7 +1,7 @@
 @reference "../../../styles/index.css";
 
 .list {
-  @apply xs:w-full
+  @apply ml:w-full
     flex
     w-screen
     gap-5

packages/ui-components/src/Common/Modal/index.module.css

@@ -10,7 +10,7 @@
     dark:bg-neutral-950/40;
 
   .content {
-    @apply xs:p-6
+    @apply ml:p-6
       relative
       m-4
       inline-flex

packages/ui-components/src/Common/Search/Modal/index.module.css

@@ -99,9 +99,14 @@
     lg:bottom-auto
     lg:h-auto
     lg:max-w-3xl
+    lg:min-w-lg
     lg:bg-neutral-100
     dark:bg-zinc-950
     lg:dark:bg-neutral-950;
+
+  > section {
+    @apply lg:min-w-lg;
+  }
 }
 
 .modalContent {
@@ -110,7 +115,6 @@
     w-screen
     flex-col
     border-neutral-200
-    md:max-w-[42rem]
     lg:h-auto
     lg:max-h-[70vh]
     lg:w-auto

packages/ui-components/src/Common/Search/Modal/index.tsx

@@ -30,6 +30,7 @@ const SearchModal: FC<PropsWithChildren<SearchModalProps>> = ({
           <MagnifyingGlassIcon />
           {placeholder}
         </div>
+
         <span className={styles.searchButtonShortcut}>⌘ K</span>
       </Modal.Trigger>
 

packages/ui-components/src/Containers/Article/index.module.css

@@ -1,53 +1,54 @@
 @reference "../../styles/index.css";
 
 .articleLayout {
-  @apply max-w-8xl
+  @apply max-w-10xl
+    ml:grid
+    ml:grid-cols-[--spacing(52)_1fr]
+    ml:grid-rows-[1fr]
+    ml:overflow-visible
+    ml:[grid-template-areas:'sidebar_main''sidebar_footer']
     mx-auto
     block
     w-full
-    sm:grid
-    sm:grid-cols-[theme(spacing.52)_1fr]
-    sm:grid-rows-[1fr]
-    sm:overflow-visible
-    sm:[grid-template-areas:'sidebar_main''sidebar_footer']
-    md:grid-cols-[theme(spacing.64)_1fr]
-    lg:grid-cols-[theme(spacing.52)_1fr_theme(spacing.52)]
-    lg:[grid-template-areas:'sidebar_main_metabar''sidebar_footer_metabar']
-    xl:grid-cols-[theme(spacing.80)_1fr_theme(spacing.80)];
+    xl:grid-cols-[--spacing(52)_1fr_--spacing(52)]
+    xl:[grid-template-areas:'sidebar_main_metabar''sidebar_footer_metabar']
+    2xl:grid-cols-[--spacing(80)_1fr_--spacing(80)];
 
   > *:nth-child(1) {
     @apply [grid-area:sidebar]
-      lg:sticky
-      lg:top-0
-      lg:h-[100vh]
-      lg:overflow-y-auto;
+      xl:sticky
+      xl:top-0
+      xl:h-screen
+      xl:overflow-y-auto;
   }
 
   > *:nth-child(2) {
-    @apply contents
-      sm:max-lg:block;
+    @apply ml:max-xl:block
+      contents;
 
     > *:first-child {
-      @apply sm:bg-gradient-subtle
-        sm:dark:bg-gradient-subtle-dark
+      @apply ml:bg-gradient-subtle
+        ml:dark:bg-gradient-subtle-dark
+        3xl:px-18
+        ml:bg-fixed
+        ml:p-8
+        min-w-0
         p-4
         [grid-area:main]
         motion-safe:scroll-smooth
-        sm:bg-fixed
-        sm:p-12
-        xl:px-18;
+        xl:p-12;
     }
 
     > *:last-child {
-      @apply mt-8
+      @apply ml:mt-0
+        mt-8
         border-t
         [grid-area:metabar]
-        sm:mt-0
-        lg:sticky
-        lg:top-0
-        lg:max-w-xs
-        lg:border-t-0
-        lg:border-l;
+        xl:sticky
+        xl:top-0
+        xl:max-w-xs
+        xl:border-t-0
+        xl:border-l;
     }
   }
 

packages/ui-components/src/Containers/Footer/index.module.css

@@ -73,7 +73,7 @@
     }
 
     a {
-      @apply max-xs:font-semibold
+      @apply max-ml:font-semibold
         text-green-600
         dark:text-green-400;
 

packages/ui-components/src/Containers/MetaBar/index.module.css

@@ -9,7 +9,7 @@
     border-neutral-200
     px-4
     py-6
-    [overflow-wrap:anywhere]
+    wrap-anywhere
     lg:sticky
     lg:top-0
     lg:max-h-screen
@@ -46,8 +46,8 @@
       dark:text-white;
 
     a {
-      @apply max-xs:inline-block
-        max-xs:py-1
+      @apply max-ml:inline-block
+        max-ml:py-1
         font-semibold
         text-neutral-900
         underline