8675 - Calendar Event Popup Mobile View

[tjamesallen15]

Explain the details for making this change. What existing problem does the pull request solve?

This pull request will fix calendar event popup render in mobile view.

Related github/jira issue (required):
Closes #8675

Steps necessary to review your pull request (required):

• Pull this git repository, build, and run the app
• Go to http://localhost:4000/components/calendar/test-start-end-hour.html
• Toggle mobile view
• Click on any events

Included in this Pull Request:

• An e2e or functional test for the bug or feature.
• A note to the change log.

[tmcconechy]

@tjamesallen15 see a couple of problems:

a) can it be centered
b) the bottom looks cut off (should maybe scroll inside and fit)
c) there is too much space between some of the inputs

[jbrcna]

[tjamesallen15]

@tjamesallen15 see a couple of problems:

a) can it be centered b) the bottom looks cut off (should maybe scroll inside and fit) c) there is too much space between some of the inputs

i cant see the (b) and (c) notes when I checked the UI. for A, do you want the it centered on mobile screen?

[glenlieorillo]

• Focus state looks off
• Bottom border is cut off

[janahintal]

Bottom still looks off

[tmcconechy]

@tjamesallen15 yes i think it will look better centered on mobile. Could therefore also hide the arrow. When you test it try cycling through all the "Iphone*" similulators in chrome tools.

We never had a good functionality here so while improving it we should make it look good as this is going forward now for a long time of maintenance.

[tjamesallen15]

Bottom still looks off

Where is the location of this should be exactly? @janahintal

[n-ace-ancog]

Thanks for the clarification @ericangeles. Working on my side.

Screen.Recording.2024-06-06.at.1.41.04.PM.mov

EDIT: Responded on a the wrong PR. Disregard this comment.

[tjamesallen15]

• Focus state looks off
• Bottom border is cut off

This is not reproducible on my end. How do I reproduced this one using dev tools in chrome, mac and firefox? What device.

[glenlieorillo]

• Focus state looks off
• Bottom border is cut off

This is not reproducible on my end. How do I reproduced this one using dev tools in chrome, mac and firefox? What device.

Hi @tjamesallen15, I tested in BrowserStack - iPhone 15 ProMax - Chrome.

[tjamesallen15]

• Focus state looks off
• Bottom border is cut off

This is not reproducible on my end. How do I reproduced this one using dev tools in chrome, mac and firefox? What device.

Hi @tjamesallen15, I tested in BrowserStack - iPhone 15 ProMax - Chrome.

I dont have an access to browser stack unfortunately. cc @ericangeles @tmcconechy

[tmcconechy]

@tjamesallen15 try now i set your access

[tjamesallen15]

@tjamesallen15 try now i set your access

thanks tim!

[n-ace-ancog]

Working on my side.

[jbrcna]

---

just a minor observation:
checkbox is cut off

[glenlieorillo]