feat(table): use container queries by srambach · Pull Request #8054 · patternfly/patternfly

srambach · 2026-01-12T21:38:54Z

This PR adds a container to the :root for use as a fallback container for the table (and generic viewport) container queries.

The table component is now using @container in place of @media for changing the table layout from a stacked to grid layout at given breakpoints. The @container query uses the same breakpoint values as the @media query did.

Summary by CodeRabbit

New Features
- Tables now use container-query based responsiveness so they adapt to their container width (not just the viewport), improving behavior in constrained or embedded layouts.
- Root-level container metadata added to enable container-based sizing and naming.
Documentation
- Updated table docs with guidance for container queries.
- Added a demo showing container-query behavior with a drawer-panel layout.

coderabbitai · 2026-01-12T21:39:01Z

Walkthrough

Adds root-level container declarations and converts Table component responsive breakpoints from viewport media queries to container queries; updates documentation and adds a demo showing container-scoped responsive behavior for tables and a drawer.

Changes

Cohort / File(s)	Summary
CSS Container Query Foundation `src/patternfly/base/patternfly-common.scss`	Added `container-type: inline-size;` and `container-name: pf-v6-contain-viewport pf-v6-contain-table;` to `:root` to enable container query participation.
Table Responsive Breakpoints `src/patternfly/components/Table/table-grid.scss`	Replaced viewport `@media` breakpoints for md/lg/xl/2xl grid variants with `@container #{$pf-prefix}contain-table (max-width: ...)` queries to scope responsiveness to containers.
Documentation Note `src/patternfly/components/Table/examples/Table.md`	Added note: breakpoints apply to a container's width when an ancestor creates an inline-size/size container named `pf-v6-contain-table`.
Container Query Demo `src/patternfly/demos/Table/examples/Table.md`	Added "Container query with drawer" demo showing a drawer panel configured as a container (`container-type: inline-size; container-name: pf-v6-contain-table`) and explaining differing responsive behavior between main and drawer tables.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related issues

Table - investigate container query modifier #7966 — Implements the investigation to convert Table responsive behavior to container queries (matches the PR's conversion of table breakpoints and container metadata).

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The pull request title 'feat(table): use container queries' follows conventional commit guidelines with proper format (type: scope description).

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

patternfly-build · 2026-01-12T21:40:20Z

Preview: https://pf-pr-8054.surge.sh

A11y report: https://pf-pr-8054-a11y.surge.sh

- Add container-type and container-name to root element - Convert table grid media queries to container queries - Enable responsive table behavior based on container size Co-Authored-By: Claude Sonnet 4.5 <[email protected]>

coderabbitai

Actionable comments posted: 2

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/patternfly/components/Table/table-grid.scss (1)
529-538: Switch action cell from viewport media query to container query for consistency.

The action cell uses a viewport media query while the rest of the table component uses container queries. This causes the action cell layout to respond to viewport width rather than container width, desyncing it from the container-based grid breakpoints established in the pf-mobile-layout mixin.
Suggested fix
-    `@media` screen and (max-width: $pf-v6-global--breakpoint--sm) {
+    `@container` #{$pf-prefix}contain-table (max-width: #{$pf-v6-global--breakpoint--sm}) {
       grid-row-start: 1;
       grid-column-start: 2;
       margin-inline-start: 0;
     }

🤖 Fix all issues with AI agents

In `@src/patternfly/components/Table/examples/Table.md`:
- Around line 138-139: Remove the trailing space at the end of the responsive
layout description sentence in Table.md (the sentence ending with
"pf-v6-contain-table, the breakpoints will apply to the container's width.");
edit the paragraph containing "pf-v6-contain-table" to delete the trailing
whitespace so the line no longer violates MD009.

In `@src/patternfly/demos/Table/examples/Table.md`:
- Around line 468-512: The prose incorrectly states the drawer table uses the
medium breakpoint while the drawer table demo sets the modifier pf-m-grid-lg;
either update the narrative to say the drawer uses the large breakpoint or
change the drawer table modifier (table-simple-table with
table-simple-table--modifier="pf-m-grid-lg" inside the drawer-panel) to
pf-m-grid-md (or the appropriate medium modifier) so the text and code match;
adjust the sentence that references "uses the medium breakpoint" to reflect
whichever choice you make.

mcoker

LGTM!

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

coderabbitai

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/patternfly/components/Table/examples/Table.md`:
- Around line 138-139: Update the wording that currently says “screen width” to
accurately reflect container query behavior: change the phrase to something like
“viewport or container width” and clarify that breakpoints apply to the
container’s width when an ancestor creates an inline-size/size container named
`pf-v6-contain-table`; update the sentence that mentions “screen width” so it
references the `pf-v6-contain-table` container behavior instead.

coderabbitai · 2026-02-10T21:10:13Z

 These classes can be used to ensure that the table changes between the tabular and grid-based layout at an appropriate screen width.
+**Note:** If a wrapping element creates an `inline-size` or `size` container with the container name `pf-v6-contain-table`, the breakpoints will apply to the container's width.


⚠️ Potential issue | 🟡 Minor

Align wording with container query behavior.

Line 138 still says “screen width”, but the note now clarifies container-based breakpoints. This is a doc accuracy mismatch for container queries.

📝 Suggested fix

-These classes can be used to ensure that the table changes between the tabular and grid-based layout at an appropriate screen width. +These classes can be used to ensure that the table changes between the tabular and grid-based layout at an appropriate container width (or viewport width when no container is present).

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

These classes can be used to ensure that the table changes between the tabular and grid-based layout at an appropriate screen width.

**Note:** If a wrapping element creates an `inline-size` or `size` container with the container name `pf-v6-contain-table`, the breakpoints will apply to the container's width.

These classes can be used to ensure that the table changes between the tabular and grid-based layout at an appropriate container width (or viewport width when no container is present).

**Note:** If a wrapping element creates an `inline-size` or `size` container with the container name `pf-v6-contain-table`, the breakpoints will apply to the container's width.

🤖 Prompt for AI Agents

In `@src/patternfly/components/Table/examples/Table.md` around lines 138 - 139, Update the wording that currently says “screen width” to accurately reflect container query behavior: change the phrase to something like “viewport or container width” and clarify that breakpoints apply to the container’s width when an ancestor creates an inline-size/size container named `pf-v6-contain-table`; update the sentence that mentions “screen width” so it references the `pf-v6-contain-table` container behavior instead.

patternfly-build · 2026-02-12T16:35:36Z

🎉 This PR is included in version 6.5.0-prerelease.40 🎉

The release is available on:

Your semantic-release bot 📦🚀

srambach force-pushed the just-container-on-root branch from f700ace to fe0f821 Compare January 28, 2026 15:53

feat(table): cleanup names and add demo

7832458

srambach marked this pull request as ready for review January 28, 2026 22:05

coderabbitai Bot reviewed Jan 28, 2026

View reviewed changes

Comment thread src/patternfly/components/Table/examples/Table.md Outdated

Comment thread src/patternfly/demos/Table/examples/Table.md

srambach changed the title ~~WIP feat(responsive): only container-type on root~~ feat(table): use container queries Jan 28, 2026

feat(table): remove modifier on drawer table

884da1e

mcoker approved these changes Feb 10, 2026

View reviewed changes

chore(table): remove trailing space

32444f5

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

coderabbitai Bot reviewed Feb 10, 2026

View reviewed changes

mcoker merged commit 95324bf into patternfly:main Feb 12, 2026
5 checks passed

patternfly-build added the released on @prerelease label Feb 12, 2026

coderabbitai Bot mentioned this pull request Feb 13, 2026

fix(drawer,table): make grid tables responsive to drawer width #8133

Open

srambach mentioned this pull request Feb 17, 2026

WIP feat(responsive): add a root container and use it for table responsive behavior #8050

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(table): use container queries#8054

feat(table): use container queries#8054
mcoker merged 4 commits into
patternfly:mainfrom
srambach:just-container-on-root

srambach commented Jan 12, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jan 12, 2026 •

edited

Loading

Uh oh!

patternfly-build commented Jan 12, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

mcoker left a comment

Uh oh!

coderabbitai Bot left a comment

Uh oh!

coderabbitai Bot Feb 10, 2026

Uh oh!

Uh oh!

patternfly-build commented Feb 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		These classes can be used to ensure that the table changes between the tabular and grid-based layout at an appropriate screen width.
		Note: If a wrapping element creates an `inline-size` or `size` container with the container name `pf-v6-contain-table`, the breakpoints will apply to the container's width.

Conversation

srambach commented Jan 12, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jan 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related issues

Uh oh!

patternfly-build commented Jan 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

patternfly-build commented Feb 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

srambach commented Jan 12, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jan 12, 2026 •

edited

Loading

patternfly-build commented Jan 12, 2026 •

edited

Loading