feat: migrate resize observer usage to CSS container queries where applicable

[florian-sanders-cc]

Container queries are now widely available (Baseline 2023) and should be used instead of our ResizeController for components that only need responsive CSS layout changes.

Important distinction: Container queries can only replace ResizeController when the component:

• Renders the same HTML structure regardless of width
• Only uses width for CSS styling (classes/attributes)

They cannot replace ResizeController when the component:

• Renders different HTML templates based on width
• Passes width-based props to child components
• Needs precise pixel values for JS calculations
• Requires JS callbacks on resize (e.g., chart libraries)

Browser Support

Container Queries are available in:

• Chrome/Edge 105+ (Aug 2022)
• Firefox 110+ (Feb 2023)
• Safari 16+ (Sep 2022)

Candidates for Migration (9 components)

These components render the same HTML and only use CSS attributes/classes for responsive styling:

Component	Breakpoints	Current Pattern
cc-pricing-product-consumption	600	CSS class (body--big / body--small)
cc-overview	570, 860, 1150	w-lt-* / w-gte-* attributes
cc-token-session-list	730, 995	w-lt-* / w-gte-* attributes
cc-token-oauth-list	730, 995	w-lt-* / w-gte-* attributes
cc-token-api-list	730	w-lt-* / w-gte-* attributes
cc-zone-input	600	w-lt-* / w-gte-* attributes
cc-oauth-consumer-info	460, 550	w-lt-* / w-gte-* attributes
cc-oauth-consumer-form	450, 550, 750	w-lt-* / w-gte-* attributes
cc-invoice-list	520	w-lt-* / w-gte-* attributes

NOT Migratable (8 components)

Component	Reason
cc-pricing-product	Renders different HTML (<table> vs <div> layout) based on width
cc-invoice-table	Renders different HTML (<table> vs list) based on width
cc-orga-member-card	Passes width-based props to children (?inline, button mode)
cc-tile-requests	Uses width for JS calculations (determines bar count)
cc-expand	Needs precise height measurements for expand/collapse animations
cc-tile-metrics	Requires JS callback to trigger ChartJS resize()
cc-map	Requires JS callback to trigger Leaflet invalidateSize()

Migration Pattern

Before (ResizeController):

constructor() {
  new ResizeController(this, { widthBreakpoints: [600] });
}

:host([w-lt-600]) { /* small */ }
:host([w-gte-600]) { /* big */ }

After (Container Queries):

:host {
  container-type: inline-size;
}
@container (max-width: 599px) { /* small */ }
@container (min-width: 600px) { /* big */ }

Benefits

• Eliminates JavaScript for pure CSS layout changes
• Reduces bundle size (no ResizeController for these components)
• Better performance (no JS→CSS roundtrip on resize)
• Native browser feature

Related

• MDN Container Queries
• web.dev Container Queries