diff --git a/app/api/__tests__/safety.spec.ts b/app/api/__tests__/safety.spec.ts
index 3259cf289..cb12f83d5 100644
--- a/app/api/__tests__/safety.spec.ts
+++ b/app/api/__tests__/safety.spec.ts
@@ -51,6 +51,7 @@ it('mock-api is only referenced in test files', () => {
       "app/main.tsx",
       "app/msw-mock-api.ts",
       "docs/mock-api-differences.md",
+      "mock-api/msw/util.ts",
       "package.json",
       "test/e2e/utils.ts",
       "test/unit/server.ts",
diff --git a/app/components/MoreActionsMenu.tsx b/app/components/MoreActionsMenu.tsx
index 9aa608ba1..774ad7c25 100644
--- a/app/components/MoreActionsMenu.tsx
+++ b/app/components/MoreActionsMenu.tsx
@@ -5,6 +5,8 @@
  *
  * Copyright Oxide Computer Company
  */
+import cn from 'classnames'
+
 import { More12Icon } from '@oxide/design-system/icons/react'
 
 import type { MenuAction } from '~/table/columns/action-col'
@@ -16,13 +18,21 @@ interface MoreActionsMenuProps {
   /** The accessible name for the menu button */
   label: string
   actions: MenuAction[]
+  isSmall?: boolean
 }
-export const MoreActionsMenu = ({ actions, label }: MoreActionsMenuProps) => {
+export const MoreActionsMenu = ({
+  actions,
+  label,
+  isSmall = false,
+}: MoreActionsMenuProps) => {
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger
         aria-label={label}
-        className="flex h-8 w-8 items-center justify-center rounded border border-default hover:bg-tertiary"
+        className={cn(
+          'flex items-center justify-center rounded border border-default hover:bg-tertiary',
+          isSmall ? 'h-6 w-6' : 'h-8 w-8'
+        )}
       >
         <More12Icon />
       </DropdownMenu.Trigger>
diff --git a/app/components/RefetchIntervalPicker.tsx b/app/components/RefetchIntervalPicker.tsx
index 639e14c26..9ad73f77c 100644
--- a/app/components/RefetchIntervalPicker.tsx
+++ b/app/components/RefetchIntervalPicker.tsx
@@ -37,9 +37,19 @@ type Props = {
   enabled: boolean
   isLoading: boolean
   fn: () => void
+  showLastFetched?: boolean
+  className?: string
+  isSlim?: boolean
 }
 
-export function useIntervalPicker({ enabled, isLoading, fn }: Props) {
+export function useIntervalPicker({
+  enabled,
+  isLoading,
+  fn,
+  showLastFetched = false,
+  className,
+  isSlim = false,
+}: Props) {
   const [intervalPreset, setIntervalPreset] = useState<IntervalPreset>('10s')
 
   const [lastFetched, setLastFetched] = useState(new Date())
@@ -53,11 +63,13 @@ export function useIntervalPicker({ enabled, isLoading, fn }: Props) {
   return {
     intervalMs: (enabled && intervalPresets[intervalPreset]) || undefined,
     intervalPicker: (
-      <div className="mb-12 flex items-center justify-between">
-        <div className="hidden items-center gap-2 text-right text-mono-sm text-tertiary lg+:flex">
-          <Time16Icon className="text-quaternary" /> Refreshed{' '}
-          {toLocaleTimeString(lastFetched)}
-        </div>
+      <div className={cn('flex items-center justify-between', className)}>
+        {showLastFetched && (
+          <div className="hidden items-center gap-2 text-right text-mono-sm text-tertiary lg+:flex">
+            <Time16Icon className="text-quaternary" /> Refreshed{' '}
+            {toLocaleTimeString(lastFetched)}
+          </div>
+        )}
         <div className="flex">
           <button
             type="button"
@@ -75,10 +87,11 @@ export function useIntervalPicker({ enabled, isLoading, fn }: Props) {
           </button>
           <Listbox
             selected={enabled ? intervalPreset : 'Off'}
-            className="w-24 [&>button]:!rounded-l-none"
+            className={cn('[&>button]:!rounded-l-none', isSlim ? '' : 'w-24')}
             items={intervalItems}
             onChange={setIntervalPreset}
             disabled={!enabled}
+            hideSelected={isSlim}
           />
         </div>
       </div>
diff --git a/app/components/RouteTabs.tsx b/app/components/RouteTabs.tsx
index 7d3c4b40e..ae82a9ba0 100644
--- a/app/components/RouteTabs.tsx
+++ b/app/components/RouteTabs.tsx
@@ -39,20 +39,30 @@ export interface RouteTabsProps {
   children: ReactNode
   fullWidth?: boolean
   sideTabs?: boolean
+  tabListClassName?: string
 }
 /** Tabbed views, controlling both the layout and functioning of tabs and the panel contents.
  *  sideTabs: Whether the tabs are displayed on the side of the panel. Default is false.
  */
-export function RouteTabs({ children, fullWidth, sideTabs = false }: RouteTabsProps) {
+export function RouteTabs({
+  children,
+  fullWidth,
+  sideTabs = false,
+  tabListClassName,
+}: RouteTabsProps) {
   const wrapperClasses = sideTabs
     ? 'ox-side-tabs flex'
     : cn('ox-tabs', { 'full-width': fullWidth })
   const tabListClasses = sideTabs ? 'ox-side-tabs-list' : 'ox-tabs-list'
-  const panelClasses = cn('ox-tabs-panel', { 'flex-grow': sideTabs })
+  const panelClasses = cn('ox-tabs-panel @container', { 'ml-5 flex-grow': sideTabs })
   return (
     <div className={wrapperClasses}>
       {/* eslint-disable-next-line jsx-a11y/interactive-supports-focus */}
-      <div role="tablist" className={tabListClasses} onKeyDown={selectTab}>
+      <div
+        role="tablist"
+        className={cn(tabListClasses, tabListClassName)}
+        onKeyDown={selectTab}
+      >
         {children}
       </div>
       {/* TODO: Add aria-describedby for active tab */}
diff --git a/app/components/TimeSeriesChart.tsx b/app/components/TimeSeriesChart.tsx
index 5fd8f6c2c..6a8e060ae 100644
--- a/app/components/TimeSeriesChart.tsx
+++ b/app/components/TimeSeriesChart.tsx
@@ -21,6 +21,8 @@ import type { TooltipProps } from 'recharts/types/component/Tooltip'
 
 import type { ChartDatum } from '@oxide/api'
 
+import { Spinner } from '~/ui/lib/Spinner'
+
 // Recharts's built-in ticks behavior is useless and probably broken
 /**
  * Split the data into n evenly spaced ticks, with one at the left end and one a
@@ -110,6 +112,7 @@ type TimeSeriesChartProps = {
   endTime: Date
   unit?: string
   yAxisTickFormatter?: (val: number) => string
+  hasBorder?: boolean
 }
 
 const TICK_COUNT = 6
@@ -132,6 +135,7 @@ export default function TimeSeriesChart({
   endTime,
   unit,
   yAxisTickFormatter = (val) => val.toLocaleString(),
+  hasBorder = true,
 }: TimeSeriesChartProps) {
   // We use the largest data point +20% for the graph scale. !rawData doesn't
   // mean it's empty (it will never be empty because we fill in artificial 0s at
@@ -153,9 +157,22 @@ export default function TimeSeriesChart({
   // re-render on every render of the parent when the data is undefined
   const data = useMemo(() => rawData || [], [rawData])
 
+  if (!data || data.length === 0) {
+    return (
+      <div className="flex h-[300px] w-full items-center justify-center">
+        <div className="m-4 flex max-w-[18rem] flex-col items-center text-center">
+          <Spinner variant="secondary" />
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className="h-[300px] w-full">
-      <ResponsiveContainer className={cn(className, 'rounded-lg border border-default')}>
+      {/* temporary until we migrate the old metrics to the new style */}
+      <ResponsiveContainer
+        className={cn(className, hasBorder && 'rounded-lg border border-default')}
+      >
         <AreaChart
           width={width}
           height={height}
diff --git a/app/pages/SiloUtilizationPage.tsx b/app/pages/SiloUtilizationPage.tsx
index 2ab2eaf68..b41370231 100644
--- a/app/pages/SiloUtilizationPage.tsx
+++ b/app/pages/SiloUtilizationPage.tsx
@@ -62,6 +62,8 @@ export function Component() {
     isLoading: useIsFetching({ queryKey: ['siloMetric'] }) > 0,
     // sliding the range forward is sufficient to trigger a refetch
     fn: () => onRangeChange(preset),
+    showLastFetched: true,
+    className: 'mb-12',
   })
 
   const commonProps = {
diff --git a/app/pages/project/instances/instance/tabs/MetricsTab.tsx b/app/pages/project/instances/instance/tabs/MetricsTab.tsx
index 7c5c8607b..f81064c98 100644
--- a/app/pages/project/instances/instance/tabs/MetricsTab.tsx
+++ b/app/pages/project/instances/instance/tabs/MetricsTab.tsx
@@ -6,9 +6,11 @@
  * Copyright Oxide Computer Company
  */
 
+import { useIsFetching } from '@tanstack/react-query'
 import { createContext, useContext, type ReactNode } from 'react'
 
 import { useDateTimeRangePicker } from '~/components/form/fields/DateTimeRangePicker'
+import { useIntervalPicker } from '~/components/RefetchIntervalPicker'
 import { RouteTabs, Tab } from '~/components/RouteTabs'
 import { useInstanceSelector } from '~/hooks/use-params'
 import { pb } from '~/util/path-builder'
@@ -23,21 +25,33 @@ const MetricsContext = createContext<{
   startTime: Date
   endTime: Date
   dateTimeRangePicker: ReactNode
-}>({ startTime, endTime, dateTimeRangePicker: <></> })
+  intervalPicker: ReactNode
+}>({ startTime, endTime, dateTimeRangePicker: <></>, intervalPicker: <></> })
 
 export const useMetricsContext = () => useContext(MetricsContext)
 
 export const MetricsTab = () => {
   const { project, instance } = useInstanceSelector()
 
-  const { startTime, endTime, dateTimeRangePicker } = useDateTimeRangePicker({
-    initialPreset: 'lastHour',
+  const { preset, onRangeChange, startTime, endTime, dateTimeRangePicker } =
+    useDateTimeRangePicker({
+      initialPreset: 'lastHour',
+    })
+
+  const { intervalPicker } = useIntervalPicker({
+    enabled: preset !== 'custom',
+    isLoading: useIsFetching({ queryKey: ['siloMetric'] }) > 0,
+    // sliding the range forward is sufficient to trigger a refetch
+    fn: () => onRangeChange(preset),
+    isSlim: true,
   })
 
   // Find the relevant <Outlet> in RouteTabs
   return (
-    <MetricsContext.Provider value={{ startTime, endTime, dateTimeRangePicker }}>
-      <RouteTabs sideTabs>
+    <MetricsContext.Provider
+      value={{ startTime, endTime, dateTimeRangePicker, intervalPicker }}
+    >
+      <RouteTabs sideTabs tabListClassName="mt-24">
         <Tab to={pb.instanceCpuMetrics({ project, instance })} sideTab>
           CPU
         </Tab>
diff --git a/app/pages/project/instances/instance/tabs/MetricsTab/CpuMetricsTab.tsx b/app/pages/project/instances/instance/tabs/MetricsTab/CpuMetricsTab.tsx
index d3aefa940..f310147bc 100644
--- a/app/pages/project/instances/instance/tabs/MetricsTab/CpuMetricsTab.tsx
+++ b/app/pages/project/instances/instance/tabs/MetricsTab/CpuMetricsTab.tsx
@@ -53,7 +53,7 @@ export function Component() {
     query: { project },
   })
 
-  const { startTime, endTime, dateTimeRangePicker } = useMetricsContext()
+  const { startTime, endTime, dateTimeRangePicker, intervalPicker } = useMetricsContext()
 
   const getQuery = (metricName: OxqlVmMetricName, state?: OxqlVcpuState) =>
     getOxqlQuery({
@@ -67,11 +67,14 @@ export function Component() {
 
   return (
     <>
-      <MetricHeader>{dateTimeRangePicker}</MetricHeader>
+      <MetricHeader>
+        {intervalPicker} {dateTimeRangePicker}
+      </MetricHeader>
       <MetricCollection>
         <MetricRow>
           <OxqlMetric
             title="CPU Utilization"
+            description="Cumulative time all vCPUs have spent in a state"
             query={getQuery('virtual_machine:vcpu_usage')}
             startTime={startTime}
             endTime={endTime}
diff --git a/app/pages/project/instances/instance/tabs/MetricsTab/DiskMetricsTab.tsx b/app/pages/project/instances/instance/tabs/MetricsTab/DiskMetricsTab.tsx
index 534ebd2cd..f395a079c 100644
--- a/app/pages/project/instances/instance/tabs/MetricsTab/DiskMetricsTab.tsx
+++ b/app/pages/project/instances/instance/tabs/MetricsTab/DiskMetricsTab.tsx
@@ -74,7 +74,7 @@ export function Component() {
     [diskData]
   )
 
-  const { startTime, endTime, dateTimeRangePicker } = useMetricsContext()
+  const { startTime, endTime, dateTimeRangePicker, intervalPicker } = useMetricsContext()
 
   // The fallback here is kind of silly — it is only invoked when there are no
   // disks, in which case we show the fallback UI and diskName is never used. We
@@ -107,21 +107,25 @@ export function Component() {
   return (
     <>
       <MetricHeader>
-        {disks.length > 2 && (
-          <Listbox
-            className="w-64"
-            aria-label="Choose disk"
-            name="disk-name"
-            selected={disk.id}
-            items={items}
-            onChange={(val) => {
-              setDisk({
-                name: disks.find((n) => n.id === val)?.name || 'All disks',
-                id: val,
-              })
-            }}
-          />
-        )}
+        <div className="flex gap-2">
+          {intervalPicker}
+
+          {disks.length > 2 && (
+            <Listbox
+              className="w-52"
+              aria-label="Choose disk"
+              name="disk-name"
+              selected={disk.id}
+              items={items}
+              onChange={(val) => {
+                setDisk({
+                  name: disks.find((n) => n.id === val)?.name || 'All disks',
+                  id: val,
+                })
+              }}
+            />
+          )}
+        </div>
         {dateTimeRangePicker}
       </MetricHeader>
       <MetricCollection>
@@ -131,12 +135,14 @@ export function Component() {
         <MetricRow>
           <OxqlMetric
             title="Disk Reads"
+            description="Total number of read operations from the disk"
             query={getQuery('virtual_disk:reads')}
             startTime={startTime}
             endTime={endTime}
           />
           <OxqlMetric
             title="Disk Writes"
+            description="Total number of write operations to the disk"
             query={getQuery('virtual_disk:writes')}
             startTime={startTime}
             endTime={endTime}
@@ -146,12 +152,14 @@ export function Component() {
         <MetricRow>
           <OxqlMetric
             title="Bytes Read"
+            description="Number of bytes read from the disk"
             query={getQuery('virtual_disk:bytes_read')}
             startTime={startTime}
             endTime={endTime}
           />
           <OxqlMetric
             title="Bytes Written"
+            description="Number of bytes written to the disk"
             query={getQuery('virtual_disk:bytes_written')}
             startTime={startTime}
             endTime={endTime}
@@ -161,6 +169,7 @@ export function Component() {
         <MetricRow>
           <OxqlMetric
             title="Disk Flushes"
+            description="Total number of flush operations on the disk"
             query={getQuery('virtual_disk:flushes')}
             startTime={startTime}
             endTime={endTime}
diff --git a/app/pages/project/instances/instance/tabs/MetricsTab/NetworkMetricsTab.tsx b/app/pages/project/instances/instance/tabs/MetricsTab/NetworkMetricsTab.tsx
index 2d46f4e45..c8629524a 100644
--- a/app/pages/project/instances/instance/tabs/MetricsTab/NetworkMetricsTab.tsx
+++ b/app/pages/project/instances/instance/tabs/MetricsTab/NetworkMetricsTab.tsx
@@ -53,7 +53,7 @@ export function Component() {
     query: { project, instance, limit: ALL_ISH },
   })
 
-  const { startTime, endTime, dateTimeRangePicker } = useMetricsContext()
+  const { startTime, endTime, dateTimeRangePicker, intervalPicker } = useMetricsContext()
 
   const networks = useMemo(
     () => [
@@ -79,33 +79,39 @@ export function Component() {
   return (
     <>
       <MetricHeader>
-        {networks.length > 2 && (
-          <Listbox
-            className="w-64"
-            aria-label="Choose disk"
-            name="disk-name"
-            selected={nic.id}
-            items={items}
-            onChange={(val) => {
-              setNic({
-                name: networks.find((n) => n.id === val)?.name || 'All NICs',
-                id: val,
-              })
-            }}
-          />
-        )}
+        <div className="flex gap-2">
+          {intervalPicker}
+
+          {networks.length > 2 && (
+            <Listbox
+              className="w-52"
+              aria-label="Choose disk"
+              name="disk-name"
+              selected={nic.id}
+              items={items}
+              onChange={(val) => {
+                setNic({
+                  name: networks.find((n) => n.id === val)?.name || 'All NICs',
+                  id: val,
+                })
+              }}
+            />
+          )}
+        </div>
         {dateTimeRangePicker}
       </MetricHeader>
       <MetricCollection>
         <MetricRow>
           <OxqlMetric
             title="Packets Sent"
+            description="Number of packets sent on the link"
             query={getQuery('instance_network_interface:packets_sent')}
             startTime={startTime}
             endTime={endTime}
           />
           <OxqlMetric
             title="Packets Received"
+            description="Number of packets received on the link"
             query={getQuery('instance_network_interface:packets_received')}
             startTime={startTime}
             endTime={endTime}
@@ -114,12 +120,14 @@ export function Component() {
         <MetricRow>
           <OxqlMetric
             title="Bytes Sent"
+            description="Number of bytes sent on the link"
             query={getQuery('instance_network_interface:bytes_sent')}
             startTime={startTime}
             endTime={endTime}
           />
           <OxqlMetric
             title="Bytes Received"
+            description="Number of bytes received on the link"
             query={getQuery('instance_network_interface:bytes_received')}
             startTime={startTime}
             endTime={endTime}
diff --git a/app/pages/project/instances/instance/tabs/MetricsTab/OxqlMetric.tsx b/app/pages/project/instances/instance/tabs/MetricsTab/OxqlMetric.tsx
index e1c07713f..24c3b21cd 100644
--- a/app/pages/project/instances/instance/tabs/MetricsTab/OxqlMetric.tsx
+++ b/app/pages/project/instances/instance/tabs/MetricsTab/OxqlMetric.tsx
@@ -16,7 +16,6 @@ import React, { Suspense, useMemo } from 'react'
 import { useApiQuery, type ChartDatum, type OxqlQueryResult } from '@oxide/api'
 
 import { MoreActionsMenu } from '~/components/MoreActionsMenu'
-import { Spinner } from '~/ui/lib/Spinner'
 import { getDurationMinutes } from '~/util/date'
 
 // An OxQL Query Result can have multiple tables, but in the web console we only ever call
@@ -170,7 +169,7 @@ export const getBytesChartProps = ({
 }: OxqlMetricChartComponentsProps): OxqlMetricChartProps => {
   // Bytes charts use 1024 as the base
   const base = 1024
-  const byteUnits = ['BYTES', 'KiB', 'MiB', 'GiB', 'TiB']
+  const byteUnits = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB']
   const largestValue = getLargestValue(chartData)
   const orderOfMagnitude = getOrderOfMagnitude(largestValue, base)
   const bytesChartDivisor = base ** orderOfMagnitude
@@ -208,7 +207,7 @@ export const getCountChartProps = ({
   const largestValue = getLargestValue(chartData)
   const orderOfMagnitude = getOrderOfMagnitude(largestValue, 1_000)
   const yAxisTickFormatter = (val: number) => yAxisLabelForCountChart(val, orderOfMagnitude)
-  return { data: chartData, label: '(COUNT)', unitForSet: '', yAxisTickFormatter }
+  return { data: chartData, label: '(Count)', unitForSet: '', yAxisTickFormatter }
 }
 
 export const getPercentDivisor = (startTime: Date, endTime: Date) => {
@@ -261,16 +260,23 @@ export const getOxqlMetricChartComponents = ({
 
 export function OxqlMetric({
   title,
+  description,
   query,
   startTime,
   endTime,
 }: {
   title: string
+  description?: string
   query: string
   startTime: Date
   endTime: Date
 }) {
-  const { data: metrics } = useApiQuery('systemTimeseriesQuery', { body: { query } })
+  const { data: metrics } = useApiQuery(
+    'systemTimeseriesQuery',
+    { body: { query } },
+    // avoid graphs flashing blank while loading when you change the time
+    { placeholderData: (x) => x }
+  )
   const chartData: ChartDatum[] = useMemo(() => getChartData(metrics), [metrics])
   // console.log(title, query, chartData)
   const unit = getUnit(title)
@@ -295,28 +301,34 @@ export function OxqlMetric({
   ]
 
   return (
-    <div className="flex w-1/2 grow flex-col">
-      <div className="flex items-center justify-between">
-        <h2 className="ml-3 flex items-center text-mono-xs text-default">
-          {title} <div className="ml-1 normal-case text-tertiary">{label}</div>
-          {!metrics && <Spinner className="ml-2" />}
-        </h2>
+    <div className="flex w-full grow flex-col rounded-lg border border-default">
+      <div className="flex items-baseline justify-between border-b px-6 py-5 border-secondary">
+        <div>
+          <h2 className="flex items-baseline gap-1.5">
+            <div className="text-sans-semi-lg">{title}</div>
+            <div className="text-sans-md text-secondary">{label}</div>
+          </h2>
+          <div className="mt-0.5 text-sans-md text-secondary">{description}</div>
+        </div>
         {/* TODO: show formatted string to user so they can see it before copying */}
-        <MoreActionsMenu label="Query actions" actions={actions} />
+        <MoreActionsMenu label="Query actions" actions={actions} isSmall />
+      </div>
+      <div className="px-6 py-5">
+        <Suspense fallback={<div className="h-[300px]" />}>
+          <TimeSeriesChart
+            className="mt-3"
+            title={title}
+            startTime={startTime}
+            endTime={endTime}
+            unit={unitForSet}
+            data={data}
+            yAxisTickFormatter={yAxisTickFormatter}
+            width={480}
+            height={240}
+            hasBorder={false}
+          />
+        </Suspense>
       </div>
-      <Suspense fallback={<div className="mt-3 h-[300px]" />}>
-        <TimeSeriesChart
-          className="mt-3"
-          title={title}
-          startTime={startTime}
-          endTime={endTime}
-          unit={unitForSet}
-          data={data}
-          yAxisTickFormatter={yAxisTickFormatter}
-          width={480}
-          height={240}
-        />
-      </Suspense>
     </div>
   )
 }
@@ -324,11 +336,18 @@ export function OxqlMetric({
 export const MetricHeader = ({ children }: { children: React.ReactNode }) => {
   // If header has only one child, align it to the end of the container
   const value = React.Children.toArray(children).length === 1 ? 'end' : 'between'
-  return <div className={`flex justify-${value}`}>{children}</div>
+  return (
+    // prettier-ignore
+    <div className={`flex flex-col gap-2 justify-${value} mt-8 @[48rem]:flex-row`}>
+      {children}
+    </div>
+  )
 }
 export const MetricCollection = ({ children }: { children: React.ReactNode }) => (
-  <div className="mt-8 flex flex-col gap-8">{children}</div>
-)
-export const MetricRow = ({ children }: { children: React.ReactNode }) => (
-  <div className="flex w-full gap-6">{children}</div>
+  <div className="mt-4 flex flex-col gap-4">{children}</div>
 )
+export const MetricRow = ({ children }: { children: React.ReactNode }) =>
+  // prettier-ignore
+  <div className="flex w-full flex-col gap-4 @[48rem]:flex-row">
+    {children}
+  </div>
diff --git a/app/pages/system/UtilizationPage.tsx b/app/pages/system/UtilizationPage.tsx
index 3c7726889..b11940e5f 100644
--- a/app/pages/system/UtilizationPage.tsx
+++ b/app/pages/system/UtilizationPage.tsx
@@ -113,6 +113,8 @@ const MetricsTab = () => {
     isLoading: useIsFetching({ queryKey: ['systemMetric'] }) > 0,
     // sliding the range forward is sufficient to trigger a refetch
     fn: () => onRangeChange(preset),
+    showLastFetched: true,
+    className: 'mb-12',
   })
 
   const commonProps = {
diff --git a/app/ui/lib/DatePicker.tsx b/app/ui/lib/DatePicker.tsx
index 151e6b57d..4636584bd 100644
--- a/app/ui/lib/DatePicker.tsx
+++ b/app/ui/lib/DatePicker.tsx
@@ -36,7 +36,7 @@ export function DatePicker(props: DatePickerProps) {
   const formatter = useDateFormatter({
     dateStyle: 'short',
     timeStyle: 'short',
-    hourCycle: 'h24',
+    hourCycle: 'h23',
   })
 
   const label = useMemo(() => {
diff --git a/app/ui/lib/DateRangePicker.tsx b/app/ui/lib/DateRangePicker.tsx
index 118a82799..8ea554482 100644
--- a/app/ui/lib/DateRangePicker.tsx
+++ b/app/ui/lib/DateRangePicker.tsx
@@ -36,7 +36,7 @@ export function DateRangePicker(props: DateRangePickerProps) {
   const formatter = useDateFormatter({
     dateStyle: 'short',
     timeStyle: 'short',
-    hourCycle: 'h24',
+    hourCycle: 'h23',
   })
 
   const label = useMemo(() => {
@@ -45,10 +45,10 @@ export function DateRangePicker(props: DateRangePickerProps) {
     // unset the value through the UI.
     if (!state.dateRange) return 'No range selected'
 
-    return formatter.formatRange(
-      state.dateRange.start.toDate(getLocalTimeZone()),
-      state.dateRange.end.toDate(getLocalTimeZone())
-    )
+    const from = state.dateRange.start.toDate(getLocalTimeZone())
+    const to = state.dateRange.end.toDate(getLocalTimeZone())
+
+    return formatter.formatRange(from, to)
   }, [state.dateRange, formatter])
 
   return (
@@ -68,8 +68,8 @@ export function DateRangePicker(props: DateRangePickerProps) {
               : 'border-default ring-accent-secondary'
           )}
         >
-          <div className={cn('relative flex w-[17rem] items-center px-3 text-sans-md')}>
-            {label}
+          <div className="relative flex w-[16rem] items-center px-3 text-sans-md">
+            <div className="truncate">{label}</div>
             {state.isInvalid && (
               <div className="absolute bottom-0 right-2 top-0 flex items-center text-error">
                 <Error12Icon className="h-3 w-3" />
diff --git a/app/ui/lib/Listbox.tsx b/app/ui/lib/Listbox.tsx
index c1617bb75..6b1cf1456 100644
--- a/app/ui/lib/Listbox.tsx
+++ b/app/ui/lib/Listbox.tsx
@@ -43,6 +43,7 @@ export interface ListboxProps<Value extends string = string> {
   /** Necessary if you want RHF to be able to focus it on error */
   buttonRef?: Ref<HTMLButtonElement>
   hideOptionalTag?: boolean
+  hideSelected?: boolean
 }
 
 export const Listbox = <Value extends string = string>({
@@ -61,6 +62,7 @@ export const Listbox = <Value extends string = string>({
   isLoading = false,
   buttonRef,
   hideOptionalTag,
+  hideSelected = false,
   ...props
 }: ListboxProps<Value>) => {
   const selectedItem = selected && items.find((i) => i.value === selected)
@@ -99,7 +101,7 @@ export const Listbox = <Value extends string = string>({
               id={id}
               name={name}
               className={cn(
-                `flex h-11 w-full items-center justify-between rounded border text-sans-md`,
+                `flex h-11 items-center justify-between rounded border text-sans-md`,
                 hasError
                   ? 'focus-error border-error-secondary hover:border-error'
                   : 'border-default hover:border-hover',
@@ -108,32 +110,44 @@ export const Listbox = <Value extends string = string>({
                 isDisabled
                   ? 'cursor-not-allowed text-disabled bg-disabled !border-default'
                   : 'bg-default',
-                isDisabled && hasError && '!border-error-secondary'
+                isDisabled && hasError && '!border-error-secondary',
+                hideSelected ? 'w-auto' : 'w-full'
               )}
               ref={buttonRef}
               {...props}
             >
-              <div className="w-full overflow-hidden overflow-ellipsis whitespace-pre px-3 text-left">
-                {selectedItem ? (
-                  // selectedLabel is one line, which is what we need when label is a ReactNode
-                  selectedItem.selectedLabel || selectedItem.label
-                ) : (
-                  <span className="text-tertiary">
-                    {noItems ? noItemsPlaceholder : placeholder}
-                  </span>
-                )}
-              </div>
-              {!isDisabled && <SpinnerLoader isLoading={isLoading} />}
+              {!hideSelected && (
+                <>
+                  <div className="w-full overflow-hidden overflow-ellipsis whitespace-pre px-3 text-left">
+                    {selectedItem ? (
+                      // selectedLabel is one line, which is what we need when label is a ReactNode
+                      selectedItem.selectedLabel || selectedItem.label
+                    ) : (
+                      <span className="text-tertiary">
+                        {noItems ? noItemsPlaceholder : placeholder}
+                      </span>
+                    )}
+                  </div>
+                  {!isDisabled && <SpinnerLoader isLoading={isLoading} />}
+                </>
+              )}
               <div
-                className="flex h-[calc(100%-12px)] items-center border-l px-3 border-secondary"
+                className={cn(
+                  'flex h-[calc(100%-12px)] items-center px-3 border-secondary',
+                  !hideSelected && 'border-l'
+                )}
                 aria-hidden
               >
                 <SelectArrows6Icon title="Select" className="w-2 text-secondary" />
               </div>
             </ListboxButton>
             <ListboxOptions
-              anchor={{ gap: 12 }}
-              className={`ox-menu pointer-events-auto ${zIndex} w-[var(--button-width)] overflow-y-auto !outline-none`}
+              anchor={{ gap: 12, to: 'bottom start' }}
+              className={cn(
+                zIndex,
+                'ox-menu pointer-events-auto overflow-y-auto !outline-none',
+                !hideSelected ? 'w-[var(--button-width)]' : 'min-w-24'
+              )}
               // This is to prevent the `useOthersInert` call in ListboxOptions.
               // Without this, when the listbox options box scrolls under the
               // top bar (for example) you can click through the top bar to the
diff --git a/app/ui/styles/components/Tabs.css b/app/ui/styles/components/Tabs.css
index 7ed6265ba..aeecb8982 100644
--- a/app/ui/styles/components/Tabs.css
+++ b/app/ui/styles/components/Tabs.css
@@ -14,6 +14,10 @@
   @apply mx-[var(--content-gutter)];
 }
 
+.ox-tabs.full-width .ox-side-tabs .ox-tabs-panel {
+  @apply mx-0 ml-4;
+}
+
 .ox-tabs-list {
   @apply mb-8 flex bg-transparent;
 }
@@ -67,11 +71,11 @@
 }
 
 .ox-side-tabs-list {
-  @apply flex w-[160px] flex-shrink-0 flex-col gap-2;
+  @apply flex w-[180px] flex-shrink-0 flex-col gap-1;
 }
 
 .ox-side-tab {
-  @apply rounded space-x-2 whitespace-nowrap p-2 py-1.5 !no-underline text-sans-md text-secondary;
+  @apply space-x-2 whitespace-nowrap rounded p-2 py-1.5 !no-underline text-sans-md text-secondary;
 }
 
 .ox-side-tab[data-state='active'],
diff --git a/mock-api/oxql-metrics.ts b/mock-api/oxql-metrics.ts
index 9029be71c..c045fc0be 100644
--- a/mock-api/oxql-metrics.ts
+++ b/mock-api/oxql-metrics.ts
@@ -23,7 +23,7 @@ for (let i = oneHourAgo.getTime(); i < now.getTime(); i += 60000) {
   timestamps.push(new Date(i).toISOString())
 }
 
-type ValueType = { [key in OxqlMetricName]: number[] }
+type ValueType = Record<OxqlMetricName, number[]>
 
 const mockOxqlValues: ValueType = {
   'instance_network_interface:bytes_received': [
@@ -210,7 +210,7 @@ const mockOxqlValues: ValueType = {
     19999198522.691017, 19999210125.45697, 19999277909.5477, 18486165951.591064,
   ],
 }
-const mockOxqlVcpuStateValues: { [key in OxqlVcpuState]: number[] } = {
+const mockOxqlVcpuStateValues: Record<OxqlVcpuState, number[]> = {
   emulation: [
     3470554833.148136, 3794070909.515587, 7484378129.162313, 7499079902.563132,
     7338835189.397617, 5769255305.989975, 5793666851.660778, 6119828972.189391,
diff --git a/package-lock.json b/package-lock.json
index 7d25fed15..3a90617d3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "@radix-ui/react-focus-guards": "1.0.1",
         "@radix-ui/react-tabs": "^1.1.0",
         "@react-aria/live-announcer": "^3.3.4",
+        "@tailwindcss/container-queries": "^0.1.1",
         "@tanstack/react-query": "^5.56.2",
         "@tanstack/react-query-devtools": "^5.56.2",
         "@tanstack/react-table": "^8.20.5",
@@ -122,7 +123,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
       "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -1335,7 +1335,6 @@
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
       "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "string-width": "^5.1.2",
@@ -1353,7 +1352,6 @@
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
       "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -1366,7 +1364,6 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^6.0.1"
@@ -1382,7 +1379,6 @@
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
       "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
@@ -1397,7 +1393,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -1407,7 +1402,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
       "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -1428,14 +1422,12 @@
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
       "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
       "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -1488,7 +1480,6 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
@@ -1502,7 +1493,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 8"
@@ -1512,7 +1502,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
@@ -1771,7 +1760,6 @@
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
       "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "engines": {
@@ -4572,6 +4560,15 @@
         "@swc/counter": "^0.1.3"
       }
     },
+    "node_modules/@tailwindcss/container-queries": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/container-queries/-/container-queries-0.1.1.tgz",
+      "integrity": "sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "tailwindcss": ">=3.2.0"
+      }
+    },
     "node_modules/@tanstack/query-core": {
       "version": "5.56.2",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.56.2.tgz",
@@ -5598,7 +5595,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -5608,14 +5604,12 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
       "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "normalize-path": "^3.0.0",
@@ -5629,7 +5623,6 @@
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
       "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/argparse": {
@@ -5950,7 +5943,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
       "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -6021,7 +6013,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fill-range": "^7.1.1"
@@ -6172,7 +6163,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 6"
@@ -6269,7 +6259,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
       "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "anymatch": "~3.1.2",
@@ -6559,7 +6548,6 @@
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
       "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
@@ -6676,7 +6664,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "cssesc": "bin/cssesc"
@@ -7057,14 +7044,12 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
       "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true,
       "license": "Apache-2.0"
     },
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/doctrine": {
@@ -7208,7 +7193,6 @@
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/ee-first": {
@@ -7245,7 +7229,6 @@
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/emoji-regex-xs": {
@@ -8364,7 +8347,6 @@
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
       "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
@@ -8395,7 +8377,6 @@
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
       "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "reusify": "^1.0.4"
@@ -8450,7 +8431,6 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -8558,7 +8538,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
       "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "cross-spawn": "^7.0.0",
@@ -8673,7 +8652,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -8688,7 +8666,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -8839,7 +8816,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.1"
@@ -9014,7 +8990,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -9454,7 +9429,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "binary-extensions": "^2.0.0"
@@ -9503,7 +9477,6 @@
       "version": "2.15.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz",
       "integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "hasown": "^2.0.2"
@@ -9554,7 +9527,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -9599,7 +9571,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-extglob": "^2.1.1"
@@ -9644,7 +9615,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
@@ -9840,7 +9810,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/iterator.prototype": {
@@ -9865,7 +9834,6 @@
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
       "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
-      "dev": true,
       "license": "BlueOak-1.0.0",
       "dependencies": {
         "@isaacs/cliui": "^8.0.2"
@@ -10000,7 +9968,6 @@
       "version": "1.21.6",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz",
       "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "jiti": "bin/jiti.js"
@@ -10229,7 +10196,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
       "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=14"
@@ -10242,7 +10208,6 @@
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/locate-path": {
@@ -10425,7 +10390,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 8"
@@ -10534,7 +10498,6 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
       "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "braces": "^3.0.3",
@@ -10594,7 +10557,6 @@
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
       "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "brace-expansion": "^2.0.1"
@@ -10620,7 +10582,6 @@
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
       "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "dev": true,
       "license": "ISC",
       "engines": {
         "node": ">=16 || 14 >=14.17"
@@ -10746,7 +10707,6 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
       "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "any-promise": "^1.0.0",
@@ -10758,7 +10718,6 @@
       "version": "3.3.8",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
       "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -10823,7 +10782,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -10872,7 +10830,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
       "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 6"
@@ -11176,7 +11133,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz",
       "integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==",
-      "dev": true,
       "license": "BlueOak-1.0.0"
     },
     "node_modules/param-case": {
@@ -11497,7 +11453,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -11507,14 +11462,12 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/path-scurry": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
       "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
-      "dev": true,
       "license": "BlueOak-1.0.0",
       "dependencies": {
         "lru-cache": "^10.2.0",
@@ -11531,7 +11484,6 @@
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
       "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/path-to-regexp": {
@@ -11561,14 +11513,12 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8.6"
@@ -11581,7 +11531,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -11591,7 +11540,6 @@
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
       "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 6"
@@ -11705,7 +11653,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
       "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "camelcase-css": "^2.0.1"
@@ -11725,7 +11672,6 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
       "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -11761,7 +11707,6 @@
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.1.tgz",
       "integrity": "sha512-bLQOjaX/ADgQ20isPJRvF0iRUHIxVhYvr53Of7wGcWlO2jvtUlH5m87DsmulFVxRpNLOnI4tB6p/oh8D7kpn9Q==",
-      "dev": true,
       "license": "ISC",
       "bin": {
         "yaml": "bin.mjs"
@@ -11774,7 +11719,6 @@
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
       "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -11898,7 +11842,6 @@
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
       "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "cssesc": "^3.0.0",
@@ -11912,7 +11855,6 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/prelude-ls": {
@@ -12153,7 +12095,6 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -12493,7 +12434,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "pify": "^2.3.0"
@@ -12503,7 +12443,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "picomatch": "^2.2.1"
@@ -12707,7 +12646,6 @@
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
       "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-core-module": "^2.13.0",
@@ -12754,7 +12692,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "iojs": ">=1.0.0",
@@ -12874,7 +12811,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -13146,7 +13082,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "shebang-regex": "^3.0.0"
@@ -13159,7 +13094,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -13266,7 +13200,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
       "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-      "dev": true,
       "license": "ISC",
       "engines": {
         "node": ">=14"
@@ -13302,7 +13235,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -13374,7 +13306,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
       "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "eastasianwidth": "^0.2.0",
@@ -13393,7 +13324,6 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "emoji-regex": "^8.0.0",
@@ -13408,14 +13338,12 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/string-width-cjs/node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -13425,7 +13353,6 @@
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
       "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -13438,7 +13365,6 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^6.0.1"
@@ -13581,7 +13507,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
@@ -13595,7 +13520,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
@@ -13671,7 +13595,6 @@
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
       "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.2",
@@ -13694,7 +13617,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
       "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 6"
@@ -13704,7 +13626,6 @@
       "version": "10.4.5",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
       "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "foreground-child": "^3.1.0",
@@ -13725,7 +13646,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -13781,7 +13701,6 @@
       "version": "3.4.17",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
       "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
@@ -13819,7 +13738,6 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.3"
@@ -13832,7 +13750,6 @@
       "version": "15.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
       "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.0.0",
@@ -13883,7 +13800,6 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
       "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "any-promise": "^1.0.0"
@@ -13893,7 +13809,6 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
       "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "thenify": ">= 3.1.0 < 4"
@@ -13989,7 +13904,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
@@ -14074,7 +13988,6 @@
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true,
       "license": "Apache-2.0"
     },
     "node_modules/ts-pattern": {
@@ -14552,7 +14465,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/utils-merge": {
@@ -15412,7 +15324,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "isexe": "^2.0.0"
@@ -15543,7 +15454,6 @@
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
       "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^6.1.0",
@@ -15562,7 +15472,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
       "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^4.0.0",
@@ -15580,7 +15489,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-convert": "^2.0.1"
@@ -15596,7 +15504,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-name": "~1.1.4"
@@ -15609,21 +15516,18 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/wrap-ansi-cjs/node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -15633,7 +15537,6 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "emoji-regex": "^8.0.0",
@@ -15648,7 +15551,6 @@
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
       "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -15661,7 +15563,6 @@
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
       "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -15674,7 +15575,6 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^6.0.1"
diff --git a/package.json b/package.json
index 864ff96e5..a0ea04eea 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "@radix-ui/react-focus-guards": "1.0.1",
     "@radix-ui/react-tabs": "^1.1.0",
     "@react-aria/live-announcer": "^3.3.4",
+    "@tailwindcss/container-queries": "^0.1.1",
     "@tanstack/react-query": "^5.56.2",
     "@tanstack/react-query-devtools": "^5.56.2",
     "@tanstack/react-table": "^8.20.5",
diff --git a/tailwind.config.ts b/tailwind.config.ts
index e68c978a3..8f081c1a8 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -6,6 +6,7 @@
  * Copyright Oxide Computer Company
  */
 
+import containerQueriesPlugin from '@tailwindcss/container-queries'
 import { type Config } from 'tailwindcss'
 import plugin from 'tailwindcss/plugin'
 
@@ -74,5 +75,6 @@ export default {
       addUtilities(colorUtilities)
       addUtilities(elevationUtilities)
     }),
+    containerQueriesPlugin,
   ],
 } satisfies Config