Adjust p-dividers on /pro/why-pro to align with vanilla

[petesfrench]

Done

• This change is to align with a fix in vanilla to the p-divider class, I had to update it to fit a specific screen size where the content was overlapping instead (see screenshot below)

QA

• go to https://ubuntu-com-13884.demos.haus/pro/why-pro
• Check the 'available everywhere' section works on different screen sizes.

Issue / Card

Fixes n/a

Screenshots

before:

after:

Help

QA steps - Commit guidelines

[webteam-app]

Demo

Jenkins

demos.haus

[jmuzina]

@petesfrench What browser & dimensions was the "before" snapshot taken in?

I'm able to slightly reproduce this on u.com but not to the severity shown in your "before" screenshot:

[jmuzina]

@petesfrench Haven't investigated your demo code yet, but my first read from looking at the code as it currently exists on u.com is that you wouldn't need the no-divider class to remove the first divider if the first divider block was the first element in the divider.

Because your <p> with "Available everywhere" is also a child of the divider, it causes the need for no-divider. Maybe you can place it in another element on top of (outside) the divider.

The divider line is being hidden for divider blocks that are the first child of their parent.

See sass src: https://github.com/canonical/vanilla-framework/blob/d0197b27f5733789d6d23536eabe68356e045ae1/scss/_patterns_divider.scss#L47

I'll check out the responsiveness issue now

[jmuzina]

See comment from @bartaz on avoiding future use of p-divider here.

[petesfrench]

@jmuzina I have chosen to include the initial divider here as otherwise it looks like this:

I am on Ubuntu/Chrome.

[petesfrench]

Hey @jmuzina, sorry, could you take another look at this please? It got a little lost

[lyubomir-popov]

To me, this makes the page look a little broken. Why are we using this component on the rebranded pages? It is part of the old style we're moving away from, and as you can see, the line protrudes strangely on the left of things:

It also leads to a broken grid:

As far as I'm aware, the divider component was meant to be used at the full fixed width, so this would fall under incorrect usage, rather than something that requires an enhancement. Happy to provide an alternative design if UX is ok with me doing so?

[petesfrench]

@lyubomir-popov What should we do here? Is there a quick fix we can apply?