🖍 [story desktop panel] make aspect ratio match 2021-background for short viewports

[cpauwels]

Closes #35796 and avoids situations like this one:

[CLAassistant]

All committers have signed the CLA.

[amp-owners-bot]

Hey @gmajoulet, @newmuis! These files were changed:

extensions/amp-story/1.0/amp-story-desktop-one-panel.css

[mszylkowski]

Thanks for contributing, I'm adding some context so other people in the team can review this:

Context: As I suggested on the issue #35796, the maximum aspect-ratio 36/53 would match the widest phone experiences for stories properly. Currently the aspect-ratio for the one-panel can go up to 3/4, but that's too wide / square for the ratios that we see in the wild, bringing more headaches to story creators. This PR aims to limit the aspect-ratio of the one-panel to that of the wider set of phone screens, so creators don't need to account for even wider formats than what they have to.

I think this PR is good to go, and we could focus on really tall displays at some point with #35285 (which is not as prevalent and would require some extra work).

Any other thoughts? @gmajoulet @newmuis @processprocess

[processprocess]

Thank you for the PR and additional context!
I think it makes sense for this to follow the max aspect ratio we communicate.

Do we want to consider adding 3 / 4 as the widest aspect ratio we support?
iPads are 3 / 4 (There may not be a large amount of people viewing stories on iPads so not sure if it's worth it).

It would be good to follow up with @hongcatlover to understand this decision before we modify this UX.

[cpauwels]

@processprocess I dont't own an iPad but I think (according to the Chrome device preview) it already switches to the desktop mode, and hence uses the default 69 / 116 aspect ratio.

Here's a screenshot:

[gmajoulet]

Quick questions:

• Why did we override the default 69:116 with 3:4 for short heights in the first place?
• Why don't we use 69:116 here too?

[cpauwels]

I think the idea was that in landscape on phones the story would be as large as possible. But IMO 3 / 4 is just too wide, and I think the 36 / 53 aspect ratio works just right, while also being consistent with the 2021-background.

[mszylkowski]

Quick questions:

• Why did we override the default 69:116 with 3:4 for short heights in the first place?
• Why don't we use 69:116 here too?

I think we could use 69:116 on one-panel desktop at all times and remove the height breakpoint at 538px, I don't have a preference. I also see the point on having a wider page size when the browser window is short, so we can check with other people in the wg.

Just an important note on this change: if we change anything here, we also need to change css/amp-story-player-shadow.css.

[cpauwels]

I've updated the PR with the changes needed on amp-story-player-shadow.css

[gmajoulet]

Deferring to @processprocess on what aspect ratio to use, but the change sounds good to me.

@cpauwels can you add a // If changing this, also change amp-story-player-shadow.css type comments on both variables? Thank you!

[cpauwels]

@gmajoulet comments added to the two changed files mentioning the linked file

[processprocess]

Looks great to me.
Thank you for following up with this and writing the PR Paul!

[processprocess]

@newmuis we need you're OWNERS blessing on this :)

[processprocess]

Thank you for your contribution @cpauwels!
It's great how this ties the desktop experience into the aspect ratio work.
it's awesome to have your perspective and skill on this. 💪