@patternfly/patternfly 6.5.0-prerelease.39 → 6.5.0-prerelease.40

package/base/patternfly-common.css

@@ -107,6 +107,10 @@
     --pf-v6-global--thinking-active--Animation--Duration: 2s;
   }
 }
+:root {
+  container-type: inline-size;
+  container-name: pf-v6-contain-viewport pf-v6-contain-table;
+}
 
 @property --pf-v6-global--danger-jiggle--TranslateX {
   syntax: "<length>";

package/base/patternfly-common.scss

@@ -127,6 +127,9 @@
   @media screen and (prefers-reduced-motion: no-preference) {
     --#{$pf-global}--thinking-active--Animation--Duration: 2s;
   }
+
+  container-type: inline-size;
+  container-name: #{$pf-prefix}contain-viewport #{$pf-prefix}contain-table;
 }
 
 // Register the property type for the custom property to be animatable

package/components/Table/table-grid.css

@@ -367,7 +367,7 @@
   --pf-v6-c-table--cell--Width: auto;
 }
 
-@media screen and (max-width: calc(48rem - 1px)) {
+@container pf-v6-contain-table (max-width: 48rem) {
   .pf-m-grid-md.pf-v6-c-table {
     --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
     --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -645,15 +645,13 @@
   .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action {
     text-align: end;
   }
-}
-@media screen and (max-width: calc(48rem - 1px)) and (max-width: 36rem) {
-  .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action {
-    grid-row-start: 1;
-    grid-column-start: 2;
-    margin-inline-start: 0;
+  @media screen and (max-width: 36rem) {
+    .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action {
+      grid-row-start: 1;
+      grid-column-start: 2;
+      margin-inline-start: 0;
+    }
   }
-}
-@media screen and (max-width: calc(48rem - 1px)) {
   .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
     grid-column: 2;
     grid-row: 2;
@@ -679,7 +677,7 @@
   }
 }
 
-@media screen and (max-width: calc(62rem - 1px)) {
+@container pf-v6-contain-table (max-width: 62rem) {
   .pf-m-grid-lg.pf-v6-c-table {
     --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
     --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -957,15 +955,13 @@
   .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
     text-align: end;
   }
-}
-@media screen and (max-width: calc(62rem - 1px)) and (max-width: 36rem) {
-  .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
-    grid-row-start: 1;
-    grid-column-start: 2;
-    margin-inline-start: 0;
+  @media screen and (max-width: 36rem) {
+    .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
+      grid-row-start: 1;
+      grid-column-start: 2;
+      margin-inline-start: 0;
+    }
   }
-}
-@media screen and (max-width: calc(62rem - 1px)) {
   .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
     grid-column: 2;
     grid-row: 2;
@@ -991,7 +987,7 @@
   }
 }
 
-@media screen and (max-width: calc(75rem - 1px)) {
+@container pf-v6-contain-table (max-width: 75rem) {
   .pf-m-grid-xl.pf-v6-c-table {
     --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
     --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -1269,15 +1265,13 @@
   .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
     text-align: end;
   }
-}
-@media screen and (max-width: calc(75rem - 1px)) and (max-width: 36rem) {
-  .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
-    grid-row-start: 1;
-    grid-column-start: 2;
-    margin-inline-start: 0;
+  @media screen and (max-width: 36rem) {
+    .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
+      grid-row-start: 1;
+      grid-column-start: 2;
+      margin-inline-start: 0;
+    }
   }
-}
-@media screen and (max-width: calc(75rem - 1px)) {
   .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
     grid-column: 2;
     grid-row: 2;
@@ -1303,7 +1297,7 @@
   }
 }
 
-@media screen and (max-width: calc(90.625rem - 1px)) {
+@container pf-v6-contain-table (max-width: 90.625rem) {
   .pf-m-grid-2xl.pf-v6-c-table {
     --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
     --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -1581,15 +1575,13 @@
   .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
     text-align: end;
   }
-}
-@media screen and (max-width: calc(90.625rem - 1px)) and (max-width: 36rem) {
-  .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
-    grid-row-start: 1;
-    grid-column-start: 2;
-    margin-inline-start: 0;
+  @media screen and (max-width: 36rem) {
+    .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
+      grid-row-start: 1;
+      grid-column-start: 2;
+      margin-inline-start: 0;
+    }
   }
-}
-@media screen and (max-width: calc(90.625rem - 1px)) {
   .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
     grid-column: 2;
     grid-row: 2;

package/components/Table/table-grid.scss

@@ -7,25 +7,25 @@
   }
 
   .pf-m-grid-md.#{$table} {
-    @media screen and (max-width: pf-v6-max-width-bp($pf-v6-global--breakpoint--md)) {
+    @container #{$pf-prefix}contain-table (max-width: #{$pf-v6-global--breakpoint--md}) {
       @content;
     }
   }
 
   .pf-m-grid-lg.#{$table} {
-    @media screen and (max-width: pf-v6-max-width-bp($pf-v6-global--breakpoint--lg)) {
+    @container #{$pf-prefix}contain-table (max-width: #{$pf-v6-global--breakpoint--lg}) {
       @content;
     }
   }
 
   .pf-m-grid-xl.#{$table} {
-    @media screen and (max-width: pf-v6-max-width-bp($pf-v6-global--breakpoint--xl)) {
+    @container #{$pf-prefix}contain-table (max-width: #{$pf-v6-global--breakpoint--xl}) {
       @content;
     }
   }
 
   .pf-m-grid-2xl.#{$table} {
-    @media screen and (max-width: pf-v6-max-width-bp($pf-v6-global--breakpoint--2xl)) {
+    @container #{$pf-prefix}contain-table (max-width: #{$pf-v6-global--breakpoint--2xl}) {
       @content;
     }
   }

package/components/_index.css

@@ -17114,7 +17114,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   --pf-v6-c-table--cell--Width: auto;
 }
 
-@media screen and (max-width: calc(48rem - 1px)) {
+@container pf-v6-contain-table (max-width: 48rem) {
   .pf-m-grid-md.pf-v6-c-table {
     --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
     --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -17392,15 +17392,13 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action {
     text-align: end;
   }
-}
-@media screen and (max-width: calc(48rem - 1px)) and (max-width: 36rem) {
-  .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action {
-    grid-row-start: 1;
-    grid-column-start: 2;
-    margin-inline-start: 0;
+  @media screen and (max-width: 36rem) {
+    .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action {
+      grid-row-start: 1;
+      grid-column-start: 2;
+      margin-inline-start: 0;
+    }
   }
-}
-@media screen and (max-width: calc(48rem - 1px)) {
   .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
     grid-column: 2;
     grid-row: 2;
@@ -17426,7 +17424,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   }
 }
 
-@media screen and (max-width: calc(62rem - 1px)) {
+@container pf-v6-contain-table (max-width: 62rem) {
   .pf-m-grid-lg.pf-v6-c-table {
     --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
     --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -17704,15 +17702,13 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
     text-align: end;
   }
-}
-@media screen and (max-width: calc(62rem - 1px)) and (max-width: 36rem) {
-  .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
-    grid-row-start: 1;
-    grid-column-start: 2;
-    margin-inline-start: 0;
+  @media screen and (max-width: 36rem) {
+    .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
+      grid-row-start: 1;
+      grid-column-start: 2;
+      margin-inline-start: 0;
+    }
   }
-}
-@media screen and (max-width: calc(62rem - 1px)) {
   .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
     grid-column: 2;
     grid-row: 2;
@@ -17738,7 +17734,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   }
 }
 
-@media screen and (max-width: calc(75rem - 1px)) {
+@container pf-v6-contain-table (max-width: 75rem) {
   .pf-m-grid-xl.pf-v6-c-table {
     --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
     --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -18016,15 +18012,13 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
     text-align: end;
   }
-}
-@media screen and (max-width: calc(75rem - 1px)) and (max-width: 36rem) {
-  .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
-    grid-row-start: 1;
-    grid-column-start: 2;
-    margin-inline-start: 0;
+  @media screen and (max-width: 36rem) {
+    .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
+      grid-row-start: 1;
+      grid-column-start: 2;
+      margin-inline-start: 0;
+    }
   }
-}
-@media screen and (max-width: calc(75rem - 1px)) {
   .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
     grid-column: 2;
     grid-row: 2;
@@ -18050,7 +18044,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   }
 }
 
-@media screen and (max-width: calc(90.625rem - 1px)) {
+@container pf-v6-contain-table (max-width: 90.625rem) {
   .pf-m-grid-2xl.pf-v6-c-table {
     --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
     --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -18328,15 +18322,13 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
     text-align: end;
   }
-}
-@media screen and (max-width: calc(90.625rem - 1px)) and (max-width: 36rem) {
-  .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
-    grid-row-start: 1;
-    grid-column-start: 2;
-    margin-inline-start: 0;
+  @media screen and (max-width: 36rem) {
+    .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
+      grid-row-start: 1;
+      grid-column-start: 2;
+      margin-inline-start: 0;
+    }
   }
-}
-@media screen and (max-width: calc(90.625rem - 1px)) {
   .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
     grid-column: 2;
     grid-row: 2;

package/docs/components/Table/examples/Table.md

@@ -133,6 +133,7 @@ cssPrefix: pf-v6-c-table
 ### Responsive layout modifier usage
 
 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.
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |