Spike: Taking inventory of Volvo VNL Modal misalignment

[mollyaljenkins]

This spike is intended for issue https://github.com/hlxsites/vg-volvotrucks-us/issues/657 2 developers will timebox four hours in the sprint to take inventory of every instance where this needs to be adjusted.

Context/Description Prior to the Digital Reveal event some alignment has been adjusted for the All New VNL modals. The styling applies only to the modals, causing a difference in the modal versus the dedicated page. This has been a stopgap solution for the event, but proper refactoring has been put on the backlog

For example on the preview link if you click on "explore living environment" the black background cuts off some of the text under "next level comfort" but it doesn't behave this way on the dedicated living environment page

A more robust fix needs to be created via analyzing the spacing where Volvo VNL blocks exist. All inconsistencies need to be removed within V2 blocks.

[ZoeBeykirch]

Currently modals are only published on the All New VNL PDP pages, and the team would like to use them on the rest of the legacy PDP pages to have them match the redesign format

[amglebihan]

The root of the spacing issues originates from adjustments made to some styles in the modal before the digital reveal. These adjustments can be found in the styles.css file in this commit. The changes primarily involve redefining margin and padding values for sections within a modal, resulting in the differences we observe between the modals and the dedicated pages. I believe we should avoid resetting these styles as much as possible (if not entirely) and retain the default spacing for the sections. I suggest the following actions:

• Examine how pages are authored inside the all-new-vnl and v2 folders, how sections are defined, and simplify the structure as much as possible. We might be overusing sections in some cases, and the structure should be consistent across pages. Blocks have their own defined margins/paddings, and wrapping them in unnecessary sections can sometimes introduce extra spacing.
  • This page is a good example. I suggest having one section at the top that contains the v2-text block and the v2-media-with-text block, and another section with a black background that contains the rest of the v2-media-with-text blocks.
• Remove any negative margins introduced in the code mentioned above, as they can cause layout issues, content clipping, maintenance challenges, etc.
• Review how we reset these CSS variables: --section-padding, --section-div-padding-vertical, and --section-div-padding. We should avoid resetting these values.