[Fix][Filing landing] Associated institution links - Avoid "list" styles at mobile screen sizes

[meissadia]

Closes #339

Changes

• remove the type='list' prop from the <Link>
• Add class font-medium to match previously applied font weight

How to test this PR

1. Visit http://localhost:8899/landing
2. View associated institution section at mobile vs desktop width
3. Verify links do not switch to full-width on mobile

Screenshots

Desktop styles remain unchanged.

Mobile styles - Before

Mobile styles - After

[shindigira]

Basically giving a "design review".

This is MUCH better looking than using list links. Maybe slightly too squished together though.

[billhimmelsbach]

This is better than what was there before @meissadia, but my fingers are too big to click on these heh 👉❌

Would you mind putting some space between those links on mobile @meissadia?

[meissadia]

@natalia-fitzgerald I know you were going to explore options for this, but I went ahead and added 15px spacing between Institution links as a starting point. 30px spacing felt a bit much.

View	15px	30px
Mobile
Desktop

[meissadia]

@meissadia Be ware this component is used elsewhere, so any spacing/styling should be conditional or prop based.

[natalia-fitzgerald]

@meissadia
At desktop I prefer 10px. I am still looking at mobile.

[meissadia]

@natalia-fitzgerald Adjusted desktop links to be 10px apart.

Page	Mobile	Desktop
User profile
Auth. landing

[natalia-fitzgerald]

@meissadia - What width does the mobile column in your table represent? Is it a tablet width?

[meissadia]

@meissadia - What width does the mobile column in your table represent? Is it a tablet width?

@natalia-fitzgerald Looks like slightly larger than "tablet width (768px)". Instead around 817px wide in order to render the text on single lines.

[meissadia]

@natalia-fitzgerald Here are some updated screenshots, using the more standardized screen widths available in Chrome's dev tools.

Screen width	Screenshot
Mobile - 425px
Tablet - 768px
Laptop - 1024px

[billhimmelsbach]

Heyo @natalia-fitzgerald, could you take another peek at this with the screenshot above?

[natalia-fitzgerald]

@meissadia
For mobile (425px), what would you think of breaking financial institution name to the next line at mobile so that it stays next to the LEI (and Approved is on the first line by itself)? Or do you think we would be short on space potentially?

[meissadia]

@natalia-fitzgerald I imagine it would depend on the length of an Institution's name. Longer Institution names could still cause LEI to wrap, resulting in 3 lines.

My vote is to leave it as-is for now.

[natalia-fitzgerald]

@meissadia
Yeah I had the same thought/suspicion so I'm with you on leaving this the way you have it.

@natalia-fitzgerald I imagine it would depend on the length of an Institution's name. Longer Institution names could still cause LEI to wrap, resulting in 3 lines.

My vote is to leave it as-is for now.

[billhimmelsbach]

@meissadia Yeah I had the same thought/suspicion so I'm with you on leaving this the way you have it.

If @natalia-fitzgerald is happy, I'm happy! 👍

[billhimmelsbach]

@meissadia I think this one's good to go! 👍