Make display of attempts parallel between mobile and non-mobile display

[rtibbles]

Summary

• Follow up from Android and UI responsive updates #8802 to use the same iconography and display for mobile and non-mobile attempt log list display
• Allows KSelect to take slots for option and display customization
• Uses this customization to display the dropdown and the selected value with styling consistent with the non-dropdown display
• Displays using a <span> in mobile and <p> in non-mobile view to use space more efficiently.
• Removes conditional display of the coach content icon.

References

Fixes #8888

Reviewer guidance

Any UI weirdness as a result?
Non-mobile:

Mobile:

---

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Critical and brittle code paths are covered by unit tests

PR process

• PR has the correct target branch and milestone
• PR has 'needs review' or 'work-in-progress' label
• If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• If this is an important user-facing change, PR or related issue has a 'changelog' label
• If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[nucleogenesis]

The code looks good to me but I ran into a couple spots with some UI weirdness:

1. The coach content icon items at ~tablet width have a different width than the rest:

wonky-question-names.mp4

2. (I think this is unrelated to your work so not a blocker) "In progress". The icon centers as if there would be a "N minute ago" string under the label like when it is Complete making it off center in this case:

[radinamatic]

Nice, I'm seeing the coach icons on the mobile phone, same as on desktop! 👍🏽

[radinamatic]

Didn't do the super deep dive, but interacting with the lessons/quizzes and syncing seem to be working without issues.

[rtibbles]

I'll fix up the issues that @nucleogenesis identified here.

[rtibbles]

Updated to make sure that the coach content icon never causes odd styling, and that it never gets wrapped:

[marcellamaki]

Coach icon styling weirdness addressed

changes addressed