Problems List: Finalize UI styles

[ianrohde]

Issue

We found a few UI issues when reviewing the Problems List page yesterday during a Vulcan meeting. This is a second pass at the styles to shore it up.

CR/QA

Figma link

https://react-commerce-prod-git-problems-list-finalize-ui-styles-ifixit.vercel.app/Troubleshooting/Google_Phone

Fixed:

• On mobile: Device images in question cards are variable size. (ref link)
• On mobile: Missing margin on the bottom of the question count. (ref link)
• Double-check desktop/mobile spacing variances
• Refactor the AnswerCard layout to vertically center the text
• Adjust Answers heading text (I reached out to Max about this earlier today. He's going to get back to me with any tweaks)

Connects https://github.com/iFixit/ifixit/issues/51698

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-commerce	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 25, 2024 10:20pm
react-commerce-prod	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 25, 2024 10:20pm

[ghost]

👇 Click on the image for a new way to code review

#### [](https://app.codesee.io/r/reviews?pr=2220&src=https%3A%2F%2Fgithub.com%2FiFixit%2Freact-commerce) #### Legend

[github-actions[bot]]

📦 Next.js Bundle Analysis for @ifixit/commerce-frontend

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

[deltuh-vee]

@ianrohde Did you mean to swap the text in the Answers Cards?

[ianrohde]

Did you mean to swap the text in the Answers Cards?

Definitely not - thanks!

Ahhh, that was from the change from a multi-row grid layout to a single-row grid layout.

dev_block 🔴

[ianrohde]

https://github.com/iFixit/react-commerce/pull/2220/commits/229d98150d4e8eca7d5e16fef8f4c46cfb1b09f8 fixes the order.

https://github.com/iFixit/react-commerce/pull/2220/commits/55e095d50c80cf23675f830c33d4e4da250f0c9f corrects the fontSize to 14px (I missed this previously)

fontSize Details

un_dev_block 🟢

[erinemay]

Looks great! QA 👍 deploy_block 🌵 Feel free to address anything in follow up as I'm not sure what was introduced here and it's still hidden. The issues you've noted above appear to be addressed.

Style issues

1. Question cards overflow into the footer on Safari

This seems to be a Mac/Safari thing. I'm not seeing the same thing on Android+Chrome or Windwos+Chrome. When I look at the same desktop page on Sonoma + Chrome, the issue is resolved, but when I look at the same page on the iPhone 15 Pro Max with Chrome, it is present. ### Mobile https://react-commerce-prod-git-problems-list-finalize-ui-styles-ifixit.vercel.app/Troubleshooting/Samsung_Television iPhone 15 Pro Max on Browserstack with Safari  Subtler: iPhone 15 on Browserstack with Safari 17  ### Tablet iPad Pro 12.9 2021 with Safari https://react-commerce-prod-git-problems-list-finalize-ui-styles-ifixit.vercel.app/Troubleshooting/Nintendo_Switch  ### Desktop Sonoma with Safari 17 https://react-commerce-prod-git-problems-list-finalize-ui-styles-ifixit.vercel.app/Troubleshooting/Nintendo_Switch 

Non-Style issues

2. Image next to device is troubleshooting wiki image

The image next to the device in problem card is the same as the troubleshooting wiki image. Should this be the device image? https://react-commerce-prod-git-problems-list-finalize-ui-styles-ifixit.vercel.app/Troubleshooting/Steam_Deck 

[sctice-ifixit]

The image next to the device in problem card is the same as the troubleshooting wiki image. Should this be the device image?

Yes, it should be the device image. But I think we should get rid of the device "row" entirely when we start splitting problems into sections by device, per the mock-up.

[ianrohde]

Safari issue fixed with https://github.com/iFixit/react-commerce/pull/2220/commits/9fcdc6f0d16eb77c3e15a9489a5720e202a62de8

Details

un_deploy_block 🟢

[erinemay]

QA 🌵 Safari issue is fixed. The pages look good (like the mockup) on iOS+Safari mobile and tablet, MacOS+Safari, Android+Chrome, Windows+Chrome.

Issues noted in the description are fixed.

Pages checked: https://react-commerce-prod-git-problems-list-finalize-ui-styles-ifixit.vercel.app/Troubleshooting/Samsung_Television https://react-commerce-prod-git-problems-list-finalize-ui-styles-ifixit.vercel.app/Troubleshooting/Nintendo_Switch https://react-commerce-prod-git-problems-list-finalize-ui-styles-ifixit.vercel.app/Troubleshooting/Dryer https://react-commerce-prod-git-problems-list-finalize-ui-styles-ifixit.vercel.app/Troubleshooting/Christmas_Lights

[ianrohde]

Thanks for catching that issue @erinemay 🙌