Change Details

The Zebra#9 prototype features a page header with a white background that spans the whole viewport (the content of the header remains constrained) | {F36916779, size=full} | //Zebra # 9 design// Currently, the header and sticky header have a constrained width along with the background color. | {F36916802, size=full} | //current// | {F36916809, size=full} | //current sticky header// The goal of this task is to adjust the header & sticky header so that it can accomodate the new design. The header & sticky headers should still function with the old design, and need work with the full-width toggle in both cases. ### technical notes Based on the previous spike T331320, we can achieve this look in several different ways: 1. No HTML changes - Use vw units and negative margins to stretch the header to the edge of the viewport 2. Move the header HTML outside of .mw-page-container and add a wrapper element for the background 3. Move the header HTML outside of .mw-page-container without a wrapper element (give the `.vector-sticky-header-start/end` elements max-widths that add up to the page's max-width). ### A/C [] When the Zebra#9 feature flag is enabled, the header & sticky header should have a white background stretching to the edge of the viewport [] When the Zebra#9 feature flag is enabled and the full width toggle is enabled, the header & sticky header should have a white background and content should stretch to the edge of the screen. [] When the feature flag is off, there should be no visual changes.

The Zebra#9 prototype features a page header with a white background that spans the whole viewport (the content of the header remains constrained) ###Design spec | {F36916779, size=full} | //Zebra # 9 design// ###Current implementation Currently, the header and sticky header have a constrained width along with the background color. | {F36916802, size=full} | //current// | {F36916809, size=full} | //current sticky header// The goal of this task is to adjust the header & sticky header so that it can accomodate the new design. The header & sticky headers should still function with the old design, and need work with the full-width toggle in both cases. Styles for the new design should be scoped to the feature class on the html element. ### technical notes Based on the previous spike T331320, we can achieve this look in several different ways: 1. No HTML changes - Use vw units and negative margins to stretch the header to the edge of the viewport 2. Move the header HTML outside of .mw-page-container and add a wrapper element for the background 3. Move the header HTML outside of .mw-page-container without a wrapper element (give the `.vector-sticky-header-start/end` elements max-widths that add up to the page's max-width). ### A/C [] When the Zebra#9 feature flag is enabled, the header & sticky header should have a white background stretching to the edge of the viewport [] When the Zebra#9 feature flag is enabled and the full width toggle is enabled, the header & sticky header should have a white background and content should stretch to the edge of the screen. [] When the feature flag is off, there should be no visual changes.

The Zebra#9 prototype features a page header with a white background that spans the whole viewport (the content of the header remains constrained) ###Design spec | {F36916779, size=full} | //Zebra # 9 design// ###Current implementation Currently, the header and sticky header have a constrained width along with the background color. | {F36916802, size=full} | //current// | {F36916809, size=full} | //current sticky header// The goal of this task is to adjust the header & sticky header so that it can accomodate the new design. The header & sticky headers should still function with the old design, and need work with the full-width toggle in both cases. Styles for the new design should be scoped to the feature class on the html element. ### technical notes Based on the previous spike T331320, we can achieve this look in several different ways: 1. No HTML changes - Use vw units and negative margins to stretch the header to the edge of the viewport 2. Move the header HTML outside of .mw-page-container and add a wrapper element for the background 3. Move the header HTML outside of .mw-page-container without a wrapper element (give the `.vector-sticky-header-start/end` elements max-widths that add up to the page's max-width). ### A/C [] When the Zebra#9 feature flag is enabled, the header & sticky header should have a white background stretching to the edge of the viewport [] When the Zebra#9 feature flag is enabled and the full width toggle is enabled, the header & sticky header should have a white background and content should stretch to the edge of the screen. [] When the feature flag is off, there should be no visual changes.