[eng-4051] Restylized the osf-dialog to work on small mobile screen when the body needs to scroll

[bp-cos]

• Ticket: ENG-4051
• Feature flag: n/a

Purpose

To have the osf-dialog work on small mobile screens

Summary of Changes

Converted the lib > analytics-page > addon > application > template.hbs file to use osf-dialog

Updated the osf-dialog scss style to be more reactive.

Screenshot(s)

Before

After

Side Effects

A million that I have no idea about

QA Notes

Browserstack for a bunch of different configurations.

[coveralls]

Pull Request Test Coverage Report for Build 3183907962

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 71.693%

---

Totals
Change from base Build 3182156701:	0.0%
Covered Lines:	5432
Relevant Lines:	7358

---

💛 - Coveralls

[brianjgeiger]

Overall it looks good. I guess my main concern would be, what if there's, for example, a long title that was put in the header. It looks like with this it'll always be cut off, yes? With the default layout (just an X button in the header and a close button in the footer), it would work fine, but additional things there might cause trouble.

[bp-cos]

@brianjgeiger This is true. I was having a hard time with the transition between a normal state and a @media state. When I was adjusting the size of the viewport, it would be resizing normally and then jump to a small view. So I just fixed the header and footer. I see two options: First, allow the header and footer to float until a certain size @media and then go to a fixed height with ellipses. Second: Leave it fixed and then just go with ellipses if it is too long.