NFR: Refactoring Volvo VNL Modals

[mollyaljenkins]

Context/Description

Dependent on the results from the Spike #660

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.

Step one: Spike to take inventory of all areas where this needs to be fixed (requires two people)

Next Steps as per Spike #660

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, 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. Avoid resetting these values.

Attachment / link to Figma

[mollyaljenkins]

This ticket will be turned into a spike. It will be a timeboxed activity for 2-3 developers to work on.

[BeckyMedlin]

@mollyaljenkins The spike for this work is #660 . Once spike is completed, please review and update this ticket with the requirements and acc criteria. Thank you!

[ZoeBeykirch]

Spike has been completed, the ticket is now ready to update with Alan's findings in #660