From a57699b71c4fb9ca28b1b7fc60932bb1fd151ffb Mon Sep 17 00:00:00 2001
From: Brandon McConnell <brandon@dreamthinkbuild.com>
Date: Thu, 19 Mar 2026 15:12:57 -0700
Subject: [PATCH] refactor: use named container query for Columns component

Update the `Columns` component and its Storybook examples to utilize a named container query (`columns-container`). This provides explicit targeting for container query breakpoints, enhancing isolation and specificity of responsive behaviors, and preventing potential conflicts in complex or nested layouts.
---
 CHANGELOG.md                                                | 6 ++++++
 packages/components/package.json                            | 2 +-
 .../components/src/components/columns/columns.stories.tsx   | 2 +-
 packages/components/src/components/columns/columns.tsx      | 2 +-
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1595b18b..a327dc29 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.0.13] - 2026-03-19
+
+### Changed
+
+- Changed `Columns` to use named container query (`columns-container`) (#222)
+
 ## [1.0.12] - 2026-03-18
 
 ### Changed
diff --git a/packages/components/package.json b/packages/components/package.json
index ec08cc36..576a723c 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mintlify/components",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "Mintlify open-source UI components",
   "type": "module",
   "main": "./dist/index.cjs",
diff --git a/packages/components/src/components/columns/columns.stories.tsx b/packages/components/src/components/columns/columns.stories.tsx
index 83d4f35e..80b5b9e8 100644
--- a/packages/components/src/components/columns/columns.stories.tsx
+++ b/packages/components/src/components/columns/columns.stories.tsx
@@ -68,7 +68,7 @@ export const FourColumns: Story = {
  */
 export const InsideContainer: StoryObj = {
   render: () => (
-    <div className="@container resize overflow-hidden border p-8">
+    <div className="@container/columns-container resize overflow-hidden border p-8">
       <Columns cols={3}>
         <Box>1</Box>
         <Box>2</Box>
diff --git a/packages/components/src/components/columns/columns.tsx b/packages/components/src/components/columns/columns.tsx
index d9b63581..c7b63309 100644
--- a/packages/components/src/components/columns/columns.tsx
+++ b/packages/components/src/components/columns/columns.tsx
@@ -23,7 +23,7 @@ const Columns = ({
         Classes.Columns,
         "prose dark:prose-invert grid max-w-none gap-4",
         "sm:grid-cols-[repeat(var(--cols),minmax(0,1fr))]",
-        "@[0px]:grid-cols-1 @sm:grid-cols-[repeat(var(--cols),minmax(0,1fr))]",
+        "@[0px]/columns-container:grid-cols-1 @sm/columns-container:grid-cols-[repeat(var(--cols),minmax(0,1fr))]",
         className
       )}
       style={{ "--cols": numCols } as React.CSSProperties}