Carnation: Subprogram listing item images not 100% on mobile

[froboy]

To reproduce:

• Visit https://sandbox-carnation-cus.openy.org/programs/health-and-fitness
• Edit one of the description fields to be just a few words.
• observe the entire row width shrinks.

Proposed resolution:

It looks like:

 .subprogram-listing-item {
    display: table;
    ...
 }

.subprogram-listing-item .image {
    display: table-caption;
}

are causing the issue. Removing display:table; or replacing with display:block seems to resolve the issue.

[shelleygoetz]

Link to Jira ticket:https://openy.atlassian.net/browse/MAINTAIN-167

[podarok]

Fixed Thank you @bharath-kondeti

[sarah-halby]

@bharath-kondeti & @podarok reopening this issue due to issues found during QA. Images are not 100% in Rose and Lily themes and after the description was changed, the images disappeared entirely. Message from QA: After I changed the description of the weight loss subcategory, the images do not appear on mobile devices

cc @froboy

[froboy]

@bharath-kondeti please see above.

[bharath-kondeti]

@froboy, I will recheck the fix once again.

[sarah-halby]

@bharath-kondeti the issue is persisting on mobile per our QA team.

[bharath-kondeti]

@sarah-halby, Apologies for the delay. I was testing the fix on my local instance by making lily, rose themes as default each time and i was not able to see any issue, all the images were coming properly. When i set back the theme to carnation, the original issue for which this fix was made is also fixed. I was not able to exactly replicate the issue that was mentioned above.

Also, these are the steps that i have used for replicating the issue:

• Pulled the code into my local repo and made the basic updates required.
• Then, tested a subcategory page with reduced description and with the carnation theme. My local instance had a carnation theme set already. The fix issue was fixed.
• Now, logged in as admin, changed the theme to lily and cleared the cache.
• Tested the same page with lily theme and images are present.
• Same goes with the rose theme.

Can you please review the steps above that i have used for testing and let me know if I am doing anything wrong. Also, can you please help me provide the steps to reproduce the issue on lily and rose themes.

[sarah-halby]

@shelleygoetz can you please add these to the comments section in the Jira ticket, tag Anastasiia, and then create a message between us, Anastasiia, Bharath, and Avi on slack so that Anastasiia and Bharath can have a conversation there? The alternative is for Anastasiia and Bharath to have a conversation here on GitHub to speed up the solution process. cc @froboy

@bharath-kondeti our QA team member is on vacation this week, but she will review on October 4 when she returns.

[podarok]

@shelleygoetz @sarah-halby the fix merged

[sarah-halby]

@froboy & @bharath-kondeti this will be included in the Nov 9 release.

[shelleygoetz]

Tested and fixed, closing issue.