Theme: Add breakpoint methods for container queries (#113619)

* Theme: Add breakpoint methods for container queries

* Page: Define page as inline container

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,
+    },
   };
 }

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