Trays need extra padding on iPhone X

[devongovett]

🐛 Bug Report

Trays on iPhone X or other iPhones with no home button are partially obscured by the home indicator at the bottom of the screen.

🤔 Expected Behavior

There should be some extra padding at the bottom of the tray to account for the home indicator.

😯 Current Behavior

The home indicator sometimes overlaps or is too close to the contents of the tray, making it hard to access.

💁 Possible Solution

We could possibly add some padding using the safe area insets defined in CSS. Not tried this yet though. https://webkit.org/blog/7929/designing-websites-for-iphone-x/

🌍 Your Environment

Software	Version(s)
react-spectrum	3.0.2
Browser	Safari
Operating System	iOS

🧢 Your Company/Team

RSP

[sanskar-p]

Hi @devongovett
Is it fine if I try my hands on this issue? I'll start by trying safe-area-inset as mentioned in the link you suggested.(https://webkit.org/blog/7929/designing-websites-for-iphone-x/)

[devongovett]

@sanskar-p that would be awesome! Let us know if you have any questions. 😀

[sanskar-p]

@devongovett extremely sorry to bother you with such a simple issue. But I can't seem to successfully run yarn install. I'm using Windows 10.
Here is the error I'm getting.

[devongovett]

@sanskar-p Looks like you need to install the windows dev tools (Visual Studio). See https://github.com/nodejs/node-gyp#on-windows. Let me know if it doesn't work.

[sanskar-p]

Hi! Your suggestion fixed the previous error. I had to install MinGW to be able to run makefile. But now I'm facing this issue. pwd is a Linux command and hence I'm unable to work around this problem.

[mischnic]

You can remove the && pwd part in the build-icons scripts in these files for now:
packages/@spectrum-icons/color/package.json
packages/@spectrum-icons/ui/package.json
packages/@spectrum-icons/workflow/package.json

It's not really needed anyway and just a kind of progress indicator in the terminal

[snowystinger]

Yeah, that's an old artifact that we can get rid of

[sanskar-p]

I'm still not able to run yarn install successfully. Here is the error

[mischnic]

Looks like nobody so far was working on Windows 😄

Add the package cross-env as a dev dependency and prepend it (cross-env BUILD_ENV=production babel ....).

[sanskar-p]

I was finally able to run the storybook after jumping through many loops. However, now the storybook does not display properly 😢

[devongovett]

Did you by chance run make build prior to running the storybook? If so, it might be resolving to the built packages instead of the source code. Try running rm -rf packages/*/*/dist (or whatever the equivalent windows command is).

[sanskar-p]

I don't think I ran make build. Anyhow, running rm -rf packages/*/*/dist did not make a difference.😢

[snowystinger]

any warnings or errors of note in your terminal?

[sanskar-p]

There are some warnings when I run yarn install to install the dependencies but none when I run yarn start

[mischnic]

@sanskar-p I've opened a PR to fix the whole Windows situation (including a change to the webpack config to fix storybook): #805.

[ronderksen]

Does this issue still occur? I've looked at the tray on my iPhone, but it seems that the grid layout adds enough space now?

[devongovett]

I believe it is still an issue yes. If you open the docs for Picker, and open the example, you can see that tapping near the bottom of the screen on the last item doesn't activate it probably due to the home indicator.