UI Bugfix Mobile: Add distance at the bottom, if there is a difference between window.innerHeight and window.outerHeight

[relativisticelectron]

Fix for #1826

[netlify]

✅ Deploy Preview for specter-desktop-docs ready!

Name	Link
🔨 Latest commit	9f85100
🔍 Latest deploy log	https://app.netlify.com/sites/specter-desktop-docs/deploys/62f299a167321900098299c3
😎 Deploy Preview	https://deploy-preview-1827--specter-desktop-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[moneymanolis]

This currently creates huge additional space at the bottom of the tx table for me:

I think it would be good to use media queries to restrict the extra spacing to mobile devices, have a look here for more on that:
https://wpbuffs.com/media-query-for-mobile/

Sth. like this:

@media only screen and (max-width: 600px) {
.mobile-distance-element-botom {
    height: mobileDistanceElementBotomHeight; /* Fallback for browsers that do not support Custom Properties */
    height: var(--mobileDistanceElementBotomHeight, mobileDistanceElementBotomHeight);
    flex-shrink: 0;
    width: 100%;
  }
}

BTW: I could not reproduce the issue in the first place using Firefox but this depends on so much stuff besides the browser.
Update: Could reproduce it with Safari.

[moneymanolis]

Typo, should be bottom

[relativisticelectron]

Done. (now)

[moneymanolis]

How is this a fallback? What would such a browser do with "mobileDistanceElementBotomHeight"?

[relativisticelectron]

I removed it.

[relativisticelectron]

This currently creates huge additional space at the bottom of the tx table for me:

Strange. Ok. Then this difference calculation is not a good idea.

I think it would be good to use media queries to restrict the extra spacing to mobile devices, have a look here for more on that: https://wpbuffs.com/media-query-for-mobile/

Sth. like this:

@media only screen and (max-width: 600px) {
.mobile-distance-element-botom {
    height: mobileDistanceElementBotomHeight; /* Fallback for browsers that do not support Custom Properties */
    height: var(--mobileDistanceElementBotomHeight, mobileDistanceElementBotomHeight);
    flex-shrink: 0;
    width: 100%;
  }
}

BTW: I could not reproduce the issue in the first place using Firefox but this depends on so much stuff besides the browser. Update: Could reproduce it with Safari.

Ok, I will try the @media.

[moneymanolis]

Also: Did you try this approach as well?
https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
Would be a bit more tailored towards the individual viewports than the difference between innerHeight and outerHeight.

Does not work for Safari for me, though, and Firefox works fine without anything for me, so can't verify whether this helps as well.

[relativisticelectron]

Also: Did you try this approach as well? https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ Would be a bit more tailored towards the individual viewports than the difference between innerHeight and outerHeight.

Does not work for Safari for me, though, and Firefox works fine without anything for me, so can't verify whether this helps as well.

This is where I have the idea from to use the innerHeight, and then discovered that outerHeight - innerHeight fits the height of the navigation bar. Their JS code is not directly applicable, because we have nothing to shrink. On our endpoints are various elements that get cut off by the navigation bar.

[relativisticelectron]

I am unsure if window.outerHeight is the correct approach for mobile. I now changed it to a fixed height if it is a narrow screen.

EDIT: I think for mobile window.outerHeight (see https://developer.mozilla.org/en-US/docs/Web/API/Window/outerHeight ) is acceptable. I added it back in, but only for narrow screens as you suggested.