align LearningResourceListCard with figma

[ChristopherChudzicki]

What are the relevant tickets?

Potential followup to #2308

Description (What does it do?)

Aligns mobile version of the search page resource card with Figma. Changes are:

• minor changes to spacing between header row, title, footer
• alignment of button icons... now centered on mobile relative to format, start-date

Screenshots (if appropriate):

Branch Mobile vs RC Mobile
/

Branch Desktop vs RC Desktop (No change)
vs

How can this be tested?

1. Check that search page desktop cards are unchanged, search page mobile cards look like screenshot above.
2. The userlist cards in pages like /dashboard/my-lists/123 are unchanged.

[mbilalmughal]

@ChristopherChudzicki @jonkafton The main issue was on the mobile, where the title was causing layout problems. It appears to be resolved now. Thanks a lot! 👍

[jonkafton]

The spacing looks much better. Figma does have an 8px gap beneath the title, while we have an 8px top margin on the bottom section that eats into the title a little. I think fixed by giving the title font-size 12px / subtitle3.

[ChristopherChudzicki]

@jonkafton That's odd. The title is already subtitle3 at md and below, and I don't see the margin overlapping the text like it is in your picture.
/

Re gap vs margin, btw: the spacing (header-body-footer) is uneven on desktop cards, so I think margin is easier (though could change the display style between desktop/margin).

@jonkafton OHHH... I changed the font to subtitle3 on mobile as part of #2308, since that was an issue specifically mentioned in the design QA (whereas this spacing thing wasn't). My screenshot above is after a rebase post-merge, so that explains it.

[jonkafton]

Looks good!