From 6b26391cf2227e1a6a2383dc19e3fd4c08e423fe Mon Sep 17 00:00:00 2001
From: Matt Cowley <me@mattcowley.co.uk>
Date: Thu, 13 Nov 2025 18:55:28 +0000
Subject: [PATCH] Theme: Add breakpoint methods for container queries (#113619)

* Theme: Add breakpoint methods for container queries

* Page: Define page as inline container
---
 .../grafana-data/src/themes/breakpoints.ts    | 20 +++++++++++++++++++
 public/app/core/components/Page/Page.tsx      |  1 +
 2 files changed, 21 insertions(+)

diff --git a/packages/grafana-data/src/themes/breakpoints.ts b/packages/grafana-data/src/themes/breakpoints.ts
index 1ad0d713781..3d9f01111db 100644
--- a/packages/grafana-data/src/themes/breakpoints.ts
+++ b/packages/grafana-data/src/themes/breakpoints.ts
@@ -18,6 +18,10 @@ export interface ThemeBreakpoints {
   unit: string;
   up: (key: ThemeBreakpointsKey | number) => string;
   down: (key: ThemeBreakpointsKey | number) => string;
+  container: {
+    up: (key: ThemeBreakpointsKey | number, name?: string) => string;
+    down: (key: ThemeBreakpointsKey | number, name?: string) => string;
+  };
 }
 
 /** @internal */
@@ -44,6 +48,18 @@ export function createBreakpoints(): ThemeBreakpoints {
     return `@media (max-width:${value - step / 100}${unit})`;
   }
 
+  function containerUp(key: ThemeBreakpointsKey | number, name?: string) {
+    const value = typeof key === 'number' ? key : values[key];
+    const query = typeof name === 'string' ? `@container ${name}` : '@container';
+    return `${query} (width >= ${value}${unit})`;
+  }
+
+  function containerDown(key: ThemeBreakpointsKey | number, name?: string) {
+    const value = typeof key === 'number' ? key : values[key];
+    const query = typeof name === 'string' ? `@container ${name}` : '@container';
+    return `${query} (width < ${value}${unit})`;
+  }
+
   // TODO add functions for between and only
 
   return {
@@ -52,5 +68,9 @@ export function createBreakpoints(): ThemeBreakpoints {
     down,
     keys,
     unit,
+    container: {
+      up: containerUp,
+      down: containerDown,
+    },
   };
 }
diff --git a/public/app/core/components/Page/Page.tsx b/public/app/core/components/Page/Page.tsx
index cd29bbfb556..f1d8102dae1 100644
--- a/public/app/core/components/Page/Page.tsx
+++ b/public/app/core/components/Page/Page.tsx
@@ -99,6 +99,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       flex: '1 1 0',
       flexDirection: 'column',
       position: 'relative',
+      container: 'page / inline-size',
     }),
     pageContent: css({
       label: 'page-content',