Fix/277 - Fixes issues with the iPad Retina's Emulator's Layout mode not being reflected

[davidjgonzalez]

(767px -> 768px -- as the cq:responsive breakpoint is set to 768)
https://experienceleague.adobe.com/docs/experience-manager-64/administering/operations/configuring-responsive-layout.html?lang=en

Description

When selecting the iPad Retina emulator in Layout Mode in PageEditor (which is width 768px) layout mode does not work (it snaps back).

The reason for this is as follows:

• In WKND grid.less, there "phone" breakpoint had a max-width of 767px.
• The WKND's templates cq:responsive breakpoint for "phone" had a width of 768px.
• The iPad Retina emulator has a width of 768px

So, when iPad Retina emulator is selected, the "phone" breakpoint is resolved, and the Layout changes are persisted to the component's cq:responsive/phone node (since iPad Retina's 768px <= Template's cq:responsive/breakpoints/phone@width=768

However, the AEM Grid CSS for the "phone" breakpoint reacts when the viewport is <=767px, which 768px is not, therefor the persisted values on the component's cq:responsive/phone node are being ignored.

Aligning the CSS's max-width and the breakpoints max-width both to 768px resolves this conflict.

We may want to fix-up this piece of WKND actually, as only define 2 breakpoints (phone, tablet) and an implicit 3rd (default, which is anything > tablet), however the emulator's WKND ships do not let you differentiate between tablet and desktop, making it somewhat awkward/confusing.

Motivation and Context

See #277

How Has This Been Tested?

Tested on AEM 6.5.7.

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• I have signed the Adobe Open Source CLA.
• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.