refactor: use named container query for Columns component (#222)

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.

Author: brandonmcconnell

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

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",

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>

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}