@patternfly/patternfly 6.0.0-alpha.202 → 6.0.0-alpha.203

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/components/Masthead/masthead.css +22 -1
  2. package/components/Masthead/masthead.scss +9 -1
  3. package/components/Page/page.css +19 -11
  4. package/components/Page/page.scss +19 -12
  5. package/components/_index.css +41 -12
  6. package/docs/demos/Page/examples/Page.md +608 -0
  7. package/package.json +1 -1
  8. package/patternfly-no-globals.css +41 -12
  9. package/patternfly.css +41 -12
  10. package/patternfly.min.css +1 -1
  11. package/patternfly.min.css.map +1 -1
package/components/Masthead/masthead.css CHANGED
@@ -18,8 +18,9 @@
18
18
  --pf-v6-c-masthead--m-display-stack__brand--Order: -1;
19
19
  --pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--RowGap);
20
20
  --pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
21
- --pf-v6-c-masthead--m-display-stack__content--GridColumn: 2;
21
+ --pf-v6-c-masthead--m-display-stack__content--GridColumn: 1;
22
22
  --pf-v6-c-masthead--m-display-stack__content--Order: 1;
23
+ --pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn: 2;
23
24
  --pf-v6-c-masthead--m-display-stack__main--Display: contents;
24
25
  --pf-v6-c-masthead--m-display-stack__main--ColumnGap: unset;
25
26
  --pf-v6-c-masthead--m-display-inline--ColumnGap: 0;
@@ -32,6 +33,7 @@
32
33
  --pf-v6-c-masthead--m-display-inline__main--GridColumn: 1;
33
34
  --pf-v6-c-masthead--m-display-inline__content--GridColumn: 2;
34
35
  --pf-v6-c-masthead--m-display-inline__content--Order: 0;
36
+ --pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn: 2;
35
37
  --pf-v6-c-masthead--m-display-inline__main--Display: flex;
36
38
  --pf-v6-c-masthead--m-display-inline__main--ColumnGap: var(--pf-t--global--spacer--md);
37
39
  --pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
@@ -50,6 +52,7 @@
50
52
  --pf-v6-c-masthead__main--GridColumn: unset;
51
53
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
52
54
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
55
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
53
56
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
54
57
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
55
58
  display: grid;
@@ -80,6 +83,7 @@
80
83
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
81
84
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
82
85
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
86
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
83
87
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
84
88
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
85
89
  }
@@ -103,6 +107,7 @@
103
107
  --pf-v6-c-masthead__main--GridColumn: unset;
104
108
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
105
109
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
110
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
106
111
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
107
112
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
108
113
  }
@@ -116,6 +121,7 @@
116
121
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
117
122
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
118
123
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
124
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
119
125
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
120
126
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
121
127
  }
@@ -151,6 +157,9 @@
151
157
  align-items: center;
152
158
  margin-inline-end: var(--pf-v6-c-masthead__main--MarginInlineEnd);
153
159
  }
160
+ .pf-v6-c-masthead__main:has(.pf-v6-c-masthead__toggle) ~ .pf-v6-c-masthead__content {
161
+ --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead__main--toggle--content--GridColumn);
162
+ }
154
163
 
155
164
  .pf-v6-c-masthead,
156
165
  .pf-v6-c-masthead__brand {
@@ -211,6 +220,7 @@
211
220
  --pf-v6-c-masthead__main--GridColumn: unset;
212
221
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
213
222
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
223
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
214
224
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
215
225
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
216
226
  }
@@ -224,6 +234,7 @@
224
234
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
225
235
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
226
236
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
237
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
227
238
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
228
239
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
229
240
  }
@@ -262,6 +273,7 @@
262
273
  --pf-v6-c-masthead__main--GridColumn: unset;
263
274
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
264
275
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
276
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
265
277
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
266
278
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
267
279
  }
@@ -275,6 +287,7 @@
275
287
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
276
288
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
277
289
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
290
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
278
291
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
279
292
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
280
293
  }
@@ -314,6 +327,7 @@
314
327
  --pf-v6-c-masthead__main--GridColumn: unset;
315
328
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
316
329
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
330
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
317
331
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
318
332
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
319
333
  }
@@ -327,6 +341,7 @@
327
341
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
328
342
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
329
343
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
344
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
330
345
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
331
346
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
332
347
  }
@@ -366,6 +381,7 @@
366
381
  --pf-v6-c-masthead__main--GridColumn: unset;
367
382
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
368
383
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
384
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
369
385
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
370
386
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
371
387
  }
@@ -379,6 +395,7 @@
379
395
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
380
396
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
381
397
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
398
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
382
399
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
383
400
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
384
401
  }
@@ -418,6 +435,7 @@
418
435
  --pf-v6-c-masthead__main--GridColumn: unset;
419
436
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
420
437
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
438
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
421
439
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
422
440
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
423
441
  }
@@ -431,6 +449,7 @@
431
449
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
432
450
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
433
451
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
452
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
434
453
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
435
454
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
436
455
  }
@@ -470,6 +489,7 @@
470
489
  --pf-v6-c-masthead__main--GridColumn: unset;
471
490
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
472
491
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
492
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
473
493
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
474
494
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
475
495
  }
@@ -483,6 +503,7 @@
483
503
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
484
504
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
485
505
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
506
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
486
507
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
487
508
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
488
509
  }
package/components/Masthead/masthead.scss CHANGED
@@ -34,8 +34,9 @@ $pf-v6-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
34
34
  --#{$masthead}--m-display-stack__brand--Order: -1;
35
35
  --#{$masthead}--m-display-stack__brand--PaddingBlockEnd: var(--#{$masthead}--RowGap);
36
36
  --#{$masthead}--m-display-stack__brand--BorderBlockEnd: var(--#{$masthead}--BorderWidth) solid var(--#{$masthead}--BorderColor);
37
- --#{$masthead}--m-display-stack__content--GridColumn: 2;
37
+ --#{$masthead}--m-display-stack__content--GridColumn: 1;
38
38
  --#{$masthead}--m-display-stack__content--Order: 1;
39
+ --#{$masthead}--m-display-stack__main--toggle--content--GridColumn: 2;
39
40
  --#{$masthead}--m-display-stack__main--Display: contents;
40
41
  --#{$masthead}--m-display-stack__main--ColumnGap: unset; // no column gap needed until it's flex display
41
42
 
@@ -50,6 +51,7 @@ $pf-v6-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
50
51
  --#{$masthead}--m-display-inline__main--GridColumn: 1;
51
52
  --#{$masthead}--m-display-inline__content--GridColumn: 2;
52
53
  --#{$masthead}--m-display-inline__content--Order: 0;
54
+ --#{$masthead}--m-display-inline__main--toggle--content--GridColumn: 2;
53
55
  --#{$masthead}--m-display-inline__main--Display: flex;
54
56
  --#{$masthead}--m-display-inline__main--ColumnGap: var(--pf-t--global--spacer--md);
55
57
 
@@ -73,6 +75,7 @@ $pf-v6-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
73
75
  --#{$masthead}__main--GridColumn: unset;
74
76
  --#{$masthead}__content--GridColumn: var(--#{$masthead}--m-display-stack__content--GridColumn);
75
77
  --#{$masthead}__content--Order: var(--#{$masthead}--m-display-stack__content--Order);
78
+ --#{$masthead}__main--toggle--content--GridColumn: var(--#{$masthead}--m-display-stack__main--toggle--content--GridColumn);
76
79
  --#{$masthead}__main--Display: var(--#{$masthead}--m-display-stack__main--Display);
77
80
  --#{$masthead}__main--ColumnGap: var(--#{$masthead}--m-display-stack__main--ColumnGap);
78
81
  }
@@ -88,6 +91,7 @@ $pf-v6-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
88
91
  --#{$masthead}__main--GridColumn: var(--#{$masthead}--m-display-inline__main--GridColumn);
89
92
  --#{$masthead}__content--GridColumn: var(--#{$masthead}--m-display-inline__content--GridColumn);
90
93
  --#{$masthead}__content--Order: var(--#{$masthead}--m-display-inline__content--Order);
94
+ --#{$masthead}__main--toggle--content--GridColumn: var(--#{$masthead}--m-display-inline__main--toggle--content--GridColumn);
91
95
  --#{$masthead}__main--Display: var(--#{$masthead}--m-display-inline__main--Display);
92
96
  --#{$masthead}__main--ColumnGap: var(--#{$masthead}--m-display-inline__main--ColumnGap);
93
97
  }
@@ -162,6 +166,10 @@ $pf-v6-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
162
166
  column-gap: var(--#{$masthead}__main--ColumnGap);
163
167
  align-items: center;
164
168
  margin-inline-end: var(--#{$masthead}__main--MarginInlineEnd);
169
+
170
+ &:has(.#{$masthead}__toggle) ~ .#{$masthead}__content {
171
+ --#{$masthead}__content--GridColumn: var(--#{$masthead}__main--toggle--content--GridColumn);
172
+ }
165
173
  }
166
174
 
167
175
  // - Masthead main masthead content masthead logo
package/components/Page/page.css CHANGED
@@ -31,6 +31,8 @@
31
31
  --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineEnd: var(--pf-t--global--spacer--md);
32
32
  --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineStart: var(--pf-t--global--spacer--md);
33
33
  --pf-v6-c-page__main-container--ZIndex: var(--pf-t--global--z-index--xs);
34
+ --pf-v6-c-page__main-container--GridArea: main;
35
+ --pf-v6-c-page--masthead--main-container--GridArea: sidebar / sidebar / main / main;
34
36
  --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
35
37
  --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
36
38
  --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page--inset);
@@ -391,31 +393,37 @@
391
393
  flex-direction: column;
392
394
  align-self: start;
393
395
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
394
- margin-block-start: 0;
395
396
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
396
397
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
397
- overflow: auto;
398
398
  background: var(--pf-v6-c-page__main-container--BackgroundColor);
399
399
  border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
400
400
  border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
401
401
  }
402
- @media screen and (min-width: 75rem) {
403
- .pf-v6-c-page__main-container {
404
- --pf-v6-c-page__main-container--MarginInlineStart: 0;
405
- }
406
- }
407
- .pf-v6-c-page__main-container.pf-m-fill, .pf-v6-c-page__main-container:has(.pf-v6-c-page__main-wizard) {
408
- align-self: stretch;
409
- }
410
402
 
411
403
  .pf-v6-c-page__main-container,
412
404
  .pf-v6-c-page__drawer {
413
405
  z-index: var(--pf-v6-c-page__main-container--ZIndex);
414
- grid-area: main;
406
+ grid-area: var(--pf-v6-c-page__main-container--GridArea);
415
407
  overflow-x: hidden;
416
408
  overflow-y: auto;
417
409
  -webkit-overflow-scrolling: touch;
418
410
  }
411
+ @media screen and (min-width: 75rem) {
412
+ .pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
413
+ .pf-v6-c-masthead + .pf-v6-c-page__drawer,
414
+ .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__drawer {
415
+ --pf-v6-c-page__main-container--GridArea: var(--pf-v6-c-page--masthead--main-container--GridArea);
416
+ }
417
+ .pf-v6-c-page__sidebar:not(.pf-m-collapsed) + .pf-v6-c-page__main-container,
418
+ .pf-v6-c-page__sidebar:not(.pf-m-collapsed) + .pf-v6-c-page__drawer {
419
+ --pf-v6-c-page__main-container--MarginInlineStart: 0;
420
+ }
421
+ }
422
+ .pf-v6-c-page__main-container.pf-m-fill, .pf-v6-c-page__main-container:has(.pf-v6-c-page__main-wizard),
423
+ .pf-v6-c-page__drawer.pf-m-fill,
424
+ .pf-v6-c-page__drawer:has(.pf-v6-c-page__main-wizard) {
425
+ align-self: stretch;
426
+ }
419
427
  .pf-v6-c-page__main-container:focus,
420
428
  .pf-v6-c-page__drawer:focus {
421
429
  outline: 0;
package/components/Page/page.scss CHANGED
@@ -53,6 +53,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
53
53
 
54
54
  // Container for the main content area (grid area)
55
55
  --#{$page}__main-container--ZIndex: var(--pf-t--global--z-index--xs);
56
+ --#{$page}__main-container--GridArea: main;
57
+ --#{$page}--masthead--main-container--GridArea: sidebar / sidebar / main / main; // no sidebar
56
58
  --#{$page}__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
57
59
  --#{$page}__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
58
60
  --#{$page}__main-container--MarginInlineStart: var(--#{$page}--inset);
@@ -143,7 +145,6 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
143
145
 
144
146
  z-index: var(--#{$page}--c-masthead--ZIndex);
145
147
  grid-area: header;
146
-
147
148
  }
148
149
 
149
150
  // Sidebar
@@ -312,31 +313,37 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
312
313
  flex-direction: column;
313
314
  align-self: start;
314
315
  max-height: var(--#{$page}__main-container--MaxHeight);
315
- margin-block-start: 0;
316
316
  margin-inline-start: var(--#{$page}__main-container--MarginInlineStart);
317
317
  margin-inline-end: var(--#{$page}__main-container--MarginInlineEnd);
318
- overflow: auto;
319
318
  background: var(--#{$page}__main-container--BackgroundColor);
320
319
  border: var(--#{$page}__main-container--BorderWidth) solid var(--#{$page}__main-container--BorderColor);
321
320
  border-radius: var(--#{$page}__main-container--BorderRadius);
321
+ }
322
+
323
+ .#{$page}__main-container,
324
+ .#{$page}__drawer {
325
+ z-index: var(--#{$page}__main-container--ZIndex);
326
+ grid-area: var(--#{$page}__main-container--GridArea);
327
+ overflow-x: hidden;
328
+ overflow-y: auto;
329
+ -webkit-overflow-scrolling: touch;
322
330
 
323
331
  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
324
- --#{$page}__main-container--MarginInlineStart: 0;
332
+ .#{$masthead} + &,
333
+ .#{$page}__sidebar.pf-m-collapsed + & {
334
+ --#{$page}__main-container--GridArea: var(--#{$page}--masthead--main-container--GridArea);
335
+ }
336
+
337
+ .#{$page}__sidebar:not(.pf-m-collapsed) + & {
338
+ --#{$page}__main-container--MarginInlineStart: 0;
339
+ }
325
340
  }
326
341
 
327
342
  &.pf-m-fill,
328
343
  &:has(.#{$page}__main-wizard) {
329
344
  align-self: stretch;
330
345
  }
331
- }
332
346
 
333
- .#{$page}__main-container,
334
- .#{$page}__drawer {
335
- z-index: var(--#{$page}__main-container--ZIndex);
336
- grid-area: main;
337
- overflow-x: hidden;
338
- overflow-y: auto;
339
- -webkit-overflow-scrolling: touch;
340
347
 
341
348
  &:focus {
342
349
  outline: 0;
package/components/_index.css CHANGED
@@ -8853,8 +8853,9 @@ ul.pf-v6-c-list {
8853
8853
  --pf-v6-c-masthead--m-display-stack__brand--Order: -1;
8854
8854
  --pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--RowGap);
8855
8855
  --pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
8856
- --pf-v6-c-masthead--m-display-stack__content--GridColumn: 2;
8856
+ --pf-v6-c-masthead--m-display-stack__content--GridColumn: 1;
8857
8857
  --pf-v6-c-masthead--m-display-stack__content--Order: 1;
8858
+ --pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn: 2;
8858
8859
  --pf-v6-c-masthead--m-display-stack__main--Display: contents;
8859
8860
  --pf-v6-c-masthead--m-display-stack__main--ColumnGap: unset;
8860
8861
  --pf-v6-c-masthead--m-display-inline--ColumnGap: 0;
@@ -8867,6 +8868,7 @@ ul.pf-v6-c-list {
8867
8868
  --pf-v6-c-masthead--m-display-inline__main--GridColumn: 1;
8868
8869
  --pf-v6-c-masthead--m-display-inline__content--GridColumn: 2;
8869
8870
  --pf-v6-c-masthead--m-display-inline__content--Order: 0;
8871
+ --pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn: 2;
8870
8872
  --pf-v6-c-masthead--m-display-inline__main--Display: flex;
8871
8873
  --pf-v6-c-masthead--m-display-inline__main--ColumnGap: var(--pf-t--global--spacer--md);
8872
8874
  --pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
@@ -8885,6 +8887,7 @@ ul.pf-v6-c-list {
8885
8887
  --pf-v6-c-masthead__main--GridColumn: unset;
8886
8888
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
8887
8889
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
8890
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
8888
8891
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
8889
8892
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
8890
8893
  display: grid;
@@ -8915,6 +8918,7 @@ ul.pf-v6-c-list {
8915
8918
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
8916
8919
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
8917
8920
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
8921
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
8918
8922
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
8919
8923
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
8920
8924
  }
@@ -8938,6 +8942,7 @@ ul.pf-v6-c-list {
8938
8942
  --pf-v6-c-masthead__main--GridColumn: unset;
8939
8943
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
8940
8944
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
8945
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
8941
8946
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
8942
8947
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
8943
8948
  }
@@ -8951,6 +8956,7 @@ ul.pf-v6-c-list {
8951
8956
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
8952
8957
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
8953
8958
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
8959
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
8954
8960
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
8955
8961
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
8956
8962
  }
@@ -8986,6 +8992,9 @@ ul.pf-v6-c-list {
8986
8992
  align-items: center;
8987
8993
  margin-inline-end: var(--pf-v6-c-masthead__main--MarginInlineEnd);
8988
8994
  }
8995
+ .pf-v6-c-masthead__main:has(.pf-v6-c-masthead__toggle) ~ .pf-v6-c-masthead__content {
8996
+ --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead__main--toggle--content--GridColumn);
8997
+ }
8989
8998
 
8990
8999
  .pf-v6-c-masthead,
8991
9000
  .pf-v6-c-masthead__brand {
@@ -9046,6 +9055,7 @@ ul.pf-v6-c-list {
9046
9055
  --pf-v6-c-masthead__main--GridColumn: unset;
9047
9056
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
9048
9057
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
9058
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
9049
9059
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
9050
9060
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
9051
9061
  }
@@ -9059,6 +9069,7 @@ ul.pf-v6-c-list {
9059
9069
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
9060
9070
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
9061
9071
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
9072
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
9062
9073
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
9063
9074
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
9064
9075
  }
@@ -9097,6 +9108,7 @@ ul.pf-v6-c-list {
9097
9108
  --pf-v6-c-masthead__main--GridColumn: unset;
9098
9109
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
9099
9110
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
9111
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
9100
9112
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
9101
9113
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
9102
9114
  }
@@ -9110,6 +9122,7 @@ ul.pf-v6-c-list {
9110
9122
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
9111
9123
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
9112
9124
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
9125
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
9113
9126
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
9114
9127
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
9115
9128
  }
@@ -9149,6 +9162,7 @@ ul.pf-v6-c-list {
9149
9162
  --pf-v6-c-masthead__main--GridColumn: unset;
9150
9163
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
9151
9164
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
9165
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
9152
9166
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
9153
9167
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
9154
9168
  }
@@ -9162,6 +9176,7 @@ ul.pf-v6-c-list {
9162
9176
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
9163
9177
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
9164
9178
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
9179
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
9165
9180
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
9166
9181
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
9167
9182
  }
@@ -9201,6 +9216,7 @@ ul.pf-v6-c-list {
9201
9216
  --pf-v6-c-masthead__main--GridColumn: unset;
9202
9217
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
9203
9218
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
9219
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
9204
9220
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
9205
9221
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
9206
9222
  }
@@ -9214,6 +9230,7 @@ ul.pf-v6-c-list {
9214
9230
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
9215
9231
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
9216
9232
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
9233
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
9217
9234
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
9218
9235
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
9219
9236
  }
@@ -9253,6 +9270,7 @@ ul.pf-v6-c-list {
9253
9270
  --pf-v6-c-masthead__main--GridColumn: unset;
9254
9271
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
9255
9272
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
9273
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
9256
9274
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
9257
9275
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
9258
9276
  }
@@ -9266,6 +9284,7 @@ ul.pf-v6-c-list {
9266
9284
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
9267
9285
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
9268
9286
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
9287
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
9269
9288
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
9270
9289
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
9271
9290
  }
@@ -9305,6 +9324,7 @@ ul.pf-v6-c-list {
9305
9324
  --pf-v6-c-masthead__main--GridColumn: unset;
9306
9325
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
9307
9326
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
9327
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
9308
9328
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
9309
9329
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
9310
9330
  }
@@ -9318,6 +9338,7 @@ ul.pf-v6-c-list {
9318
9338
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
9319
9339
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
9320
9340
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
9341
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
9321
9342
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
9322
9343
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
9323
9344
  }
@@ -11468,6 +11489,8 @@ ul.pf-v6-c-list {
11468
11489
  --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineEnd: var(--pf-t--global--spacer--md);
11469
11490
  --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineStart: var(--pf-t--global--spacer--md);
11470
11491
  --pf-v6-c-page__main-container--ZIndex: var(--pf-t--global--z-index--xs);
11492
+ --pf-v6-c-page__main-container--GridArea: main;
11493
+ --pf-v6-c-page--masthead--main-container--GridArea: sidebar / sidebar / main / main;
11471
11494
  --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
11472
11495
  --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11473
11496
  --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page--inset);
@@ -11828,31 +11851,37 @@ ul.pf-v6-c-list {
11828
11851
  flex-direction: column;
11829
11852
  align-self: start;
11830
11853
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
11831
- margin-block-start: 0;
11832
11854
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
11833
11855
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
11834
- overflow: auto;
11835
11856
  background: var(--pf-v6-c-page__main-container--BackgroundColor);
11836
11857
  border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
11837
11858
  border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
11838
11859
  }
11839
- @media screen and (min-width: 75rem) {
11840
- .pf-v6-c-page__main-container {
11841
- --pf-v6-c-page__main-container--MarginInlineStart: 0;
11842
- }
11843
- }
11844
- .pf-v6-c-page__main-container.pf-m-fill, .pf-v6-c-page__main-container:has(.pf-v6-c-page__main-wizard) {
11845
- align-self: stretch;
11846
- }
11847
11860
 
11848
11861
  .pf-v6-c-page__main-container,
11849
11862
  .pf-v6-c-page__drawer {
11850
11863
  z-index: var(--pf-v6-c-page__main-container--ZIndex);
11851
- grid-area: main;
11864
+ grid-area: var(--pf-v6-c-page__main-container--GridArea);
11852
11865
  overflow-x: hidden;
11853
11866
  overflow-y: auto;
11854
11867
  -webkit-overflow-scrolling: touch;
11855
11868
  }
11869
+ @media screen and (min-width: 75rem) {
11870
+ .pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
11871
+ .pf-v6-c-masthead + .pf-v6-c-page__drawer,
11872
+ .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__drawer {
11873
+ --pf-v6-c-page__main-container--GridArea: var(--pf-v6-c-page--masthead--main-container--GridArea);
11874
+ }
11875
+ .pf-v6-c-page__sidebar:not(.pf-m-collapsed) + .pf-v6-c-page__main-container,
11876
+ .pf-v6-c-page__sidebar:not(.pf-m-collapsed) + .pf-v6-c-page__drawer {
11877
+ --pf-v6-c-page__main-container--MarginInlineStart: 0;
11878
+ }
11879
+ }
11880
+ .pf-v6-c-page__main-container.pf-m-fill, .pf-v6-c-page__main-container:has(.pf-v6-c-page__main-wizard),
11881
+ .pf-v6-c-page__drawer.pf-m-fill,
11882
+ .pf-v6-c-page__drawer:has(.pf-v6-c-page__main-wizard) {
11883
+ align-self: stretch;
11884
+ }
11856
11885
  .pf-v6-c-page__main-container:focus,
11857
11886
  .pf-v6-c-page__drawer:focus {
11858
11887
  outline: 0;