Through the course of implementing var C/D, it is observed that the Suggested edits module layout required some further visual design refinements not well-specified/translated from mocks to the original task description of T258704 written by me (@RHo).
----
==== Issue A. Article card and image display
The panoramic aspect ratio is not ideal for the article image, often leading to top-and-bottom cropped images or repeated-y images.
This is illustrated in the following comparison table.
| Version | Image dimensions (**W**idth x **H**eight)/Aspect | Ratio (W/H) | Example 1 | Example 2
|--|--|--
| Var C/D implemented from T258704 !![1]!! | 368x160px | 2.3 | {F32374658}| {F32374665}
| Var C/D mockups | 332x160px | 2.075 |{F32374661}| {F32374663}
| Var A/B card | 260x160px | 1.625 | {F32374672}|{F32374670}
| Standard aspect ratio | 4 : 3 | ~1.33 | {F32374674}(320x180px) | {F32374676} (320x180px)
| HD aspect ratio | 16 : 9 | ~1.78 | {F32374680}(320x180px)|{F32374678} (320x180px)
**Proposed solution:**
(i) Update the card image dimensions to `width:332px` and `height:188px` (for close to the 16:9 aspect ratio)
(ii) This also means updating the total card width according, done by adjusting the class `.suggested-edits-task-card-wrapper` to have a `width:332px`.
(iii) The task explanation below the card also requires adjusting the class `.suggested-edits-task-explanation-wrapper` to have `width:348px;`
(iv) The task explanation (class `.suggested-edits-task-explanation-wrapper`) should also have reduced top and bottom padding, changing `padding:24px 0` to **`padding:16px`**
(v) The space between the suggested edits pager and the top of the card is reduced to 8px. This is achieved by changing the margin-bottom on class `.suggested-edits-pager` from margin:11px to **`margin;8px`**, and removing the `padding-top:5px` from the class `.suggested-edits-card-wrapper`
(vi) Add a `box-shadow:inset 0px 0px 2px #c8ccd1` on the image (class `.se-card-image`) for so that there is an boundary for when there is an image with white edges:
| Current {F32374838}| Proposed with inset box-shadow {F32374833}
Note: changes proposed here may impact the need for T238598
!! [1] Implemented according to a inaccurate css provided in the task description at odds with the Zeplin mock. !!
----
==== Issue B. Suggested edit module footer
Having the border set to transparent makes the footer appear to be 'floating' below the module.
|Current {F32374700} | Proposed change {F32374710}
Add a border with 2px radius to the SE footer {border: solid 2px rgba(234,243,255,.5); border-radius:0 0 2px 2px}
----
==== Issue C. Suggested edit module header
The addition of the header info icon appears to have added unintended padding around the SE module header on the top, bottom and right.This is noticeable when compared with the Zeplin mocks:
|Header Top padding | SE module header with unexpected extra space over the 16px top padding {F32374718} | Expected header text top position with top padding {F32374759}
|Info icon right padding | {F32374720} | Expected RHS padding 16px {F32374762}
|Bottom padding (actual) | {F32374743} | Expected {F32374741}
Proposed fixes: Adjust how the info icon is being placed inside the module so that the padding for both header text and info icon is reduced to the expected.