4545 mitx online program drawercourse upgrade formatting

[collinpreston]

What are the relevant tickets?

https://github.com/mitodl/hq/issues/4545

Description (What does it do?)

Fixes the upgrade button formatting on the program drawer

Screenshots (if appropriate):

How can this be tested?

1. Enroll into a program.
2. Go to your dashboard, then program tab, then click on the program.
3. Verify that the "Get certificate" button is formatted under the text for any required course.
4. Verify that the formatting of the same button is unchanged when viewing the course on the course tab of the dashboard.

[annagav]

Looks good! Just one minor thing: could we put "Get Certificate" text in the button into one line?

[collinpreston]

Looks good! Just one minor thing: could we put "Get Certificate" text in the button into one line?

I tried resolving this, but it seems that the button text is two lines due to padding and the size of the font when the page is in a medium sized viewport.

[collinpreston]

Looks good! Just one minor thing: could we put "Get Certificate" text in the button into one line?

I tried resolving this, but it seems that the button text is two lines due to padding and the size of the font when the page is in a medium sized viewport.

@mbilalmughal do you know how the text on this button should be formatted?

[annagav]

@mbilalmughal Could you help us find the UI design for this view? The button and the text don't fit very nicely when the width of the window is changing:

[mbilalmughal]

@collinpreston @annagav Here is the mobile / Smaller screen UI for the dashboard

• Dashboard Mobile UI

I've noticed that without designing a smaller screen UI, it won't be possible to suggest appropriate solutions to the problem or adjust the content properly.

Spacing guidelines