Mobile/prepare webviews 2

[adjogima]

Refining the webviews for mobile web and mobile apps:

• Using custom insets instead of env() values (the custom inset do fallback to env() values if not set)
• Hide the header's content instead of the header itself. The header has the top inset. We need it on iOS where the webviews go under the top navigation bar.
• Be more selective on what buttons get bigger on mobile. Some have custom sizes that we don't want to override as it can break the layout or at least look unpolished
• Remove the max height of some settings panels on mobile. It can make scrolling a bit cumbersome.

[jayohms]

Looks great, thanks @adjogima 👍

[andyra]

Looks pretty good! Just a couple suggestions around formatting.

[andyra]

Do you think we need both --custom-safe-inset-<side> and --injected-safe-inset-<side>? Kinda seems like we could just use the env() value as a default, then override it with a custom value when required. Something like this?

:root {
  --safe-inset-top: env(save-area-inset-top, 0px);
}

/* Uses the default value */
.header {
  margin-block-start: var(--safe-inset-top);
}

/* Uses a custom value */
.header.is-special {
  --safe-inset-top: 3rem;
}

There also may be some finer points about how the custom props are injected, so there may well be a good reason for having two separate custom props. Anyway, a minor detail—looks good otherwise!

[andyra]

It might be helpful to split these out into named variables / functions to make it a little more clear what the intent is. Something like this, perhaps?

const shouldOrientLeft = targetGeometry.spaceOnRight < EDGE_THRESHOLD && targetGeometry.spaceOnRight < targetGeometry.spaceOnLeft
const shouldOrientRight = targetGeometry.spaceOnLeft < EDGE_THRESHOLD && targetGeometry.spaceOnLeft < targetGeometry.spaceOnRight
  
if (shouldOrientLeft) {
  this.#orientLeft()
} else if (shouldOrientRight) {
  this.#orientRight()
}

function orientLeft() {
  // offset math, classList, and CSS props set here
}

function orientRight() {
  // offset math, classList, and CSS props set here
}

[andyra]

Might be a little cleaner to nest this to remove some of the repetition:

:root:has([data-platform="ios"]) {
  &[data-text-size=xsmall] { font-size: 14px; }
  &[data-text-size=small] { font-size: 15px; }
  &[data-text-size=medium] { font-size: 16px; }
  &[data-text-size=large] { font-size: 17px; }
  &[data-text-size=xlarge] { font-size: 19px; }
  &[data-text-size=xxlarge] { font-size: 21px; }
  &[data-text-size=xxxlarge] { font-size: 23px; }  
}