🔨 (grapher) refactor mobile full width mode for embedded graphers

[sophiamersmann]

Summary

• On small screens, we want embedded Graphers to use the full screen width and bleed onto the edges horizontally (see screenshots below)
• This used to be implemented via a Grapher property shouldOptimizeForHorizontalSpace, which was awfully complicated and also led to the following bug: Grapher's modal backdrop doesn't cover the whole frame when embedded in an article and viewed on a small screen #3010
• This PR removes the shouldOptimizeForHorizontalSpace property and simply sets negative margins on embedded charts
  • It's not guaranteed that the chart title aligns with the text. It just so happens that both the grid-gap and Grapher's frame padding are set to 16px
  • As Grapher's frame padding and the grid-gap are not likely to be updated frequently, I think it's okay to rely on that for now

Screenshots

Not using the full width	Using the full width

Related issue

• fixes Grapher's modal backdrop doesn't cover the whole frame when embedded in an article and viewed on a small screen #3010

[sophiamersmann]

• 🔨 (grapher) refactor mobile full width mode for embedded graphers #3243 👈
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @sophiamersmann and the rest of your teammates on Graphite

[ikesau]

I didn't spend a ton of time parsing the old code and thinking about potential regressions, but the new stuff looks good (tested on Safari, Chrome and Firefox) 👍

I see this is currently only implemented in Chart and Key Insight components - but are the other places intentionally unchanged?

Explorer pages, datapages, key-indicators, all-charts blocks, etc, I feel like they'd all benefit from the extra horizontal width on mobile.

[sophiamersmann]

Good point! The all-charts block and key-indicator blocks are intentionally unchanged. I didn't think about explorer pages and data pages, to be honest. It would be a nice touch on data pages, I think. On explorer pages, it would kind of separate the chart from the controls and break the alignment with the other boxes, if you know what I mean.

Looking at data pages in more detail, I'm noticing that data pages are padded by 24px on both sides on mobile, although it should be 16px according to the designs. I guess we'd need to fix that before we could use full-width Graphers on mobile :(