Further improve PWA

[krschacht]

• [ ] In PWA mode, when you tap to focus in the composer input the keyboard slides up. However, it slides the WHOLE page rather than just the composer. It’s not immediately obvious this is a problem, although you can't tap any of the navigation items at the top of the screen. And then it's really a problem as the reply streams in because you stay focused in the input (which is correct) but you can’t read the reply because it's at the top of the screen. The fix is for this to behave like the ChatGPT mobile app (or iMessage) where the keyboard slides up and pushes up the composer but keeps the top of the page visible.

• [ ] Install instructions: On a mobile phone, when you first navigate to the app in a browser we just render the app normally in this mobile browser. However, it's not a good experience. I think we should detect you're viewing the app in a mobile browser, intercept and redirect you to installation instructions. I'd probably create home_controller and '/install' can be the first route on it. Ideally the instructions should detect if you're on iOS or Android and customize the instructions it presents. (I think speakeasy.app might be an example of this)

• [ ] In PWA mode you can still two-finger zoom in on the whole app. We should disable this.

• [ ] In dark mode the iOS menu bar is white. Maybe we can’t fix this and have to pick a single color, but it might be a simple setting to make the menu/status bar transparent?

• [ ] DEFER — The conversations and assistants in the left nav are a little bit small to tap with your finger. Comparing it to ChatGPT mobile, I think we should both increase the font size and add some padding above and below. Likewise with your name/profile bar in the bottom left. Comparison:

  • 

• [x] DEFER — All the tappable elements in the top bar while viewing a conversation, those feel a bit too small as well.

• [x] Hover states don't work properly on mobile so we should eliminate those. Specifically, when you tap on the conversation title in the left nav it does not activate that conversation, instead it activates the hover state of that conversation. You have to tap a second time to actually select that conversation. As a first step, we can disable all hover states on mobile. This used to be difficult but it looks like Tailwind now supports this easily (https://github.com/tailwindlabs/tailwindcss/discussions/1739#discussioncomment-3630717). Separately we can figure ou thow to

• [x] Login & signup pages are too tall so they can be scrolled. Repro: add the app to phone home screen, open the app and make sure you're logged out, try scrolling up & down on the login page. We must have some big whitespace beneath the form.

• [x] If you long tap on a conversation (or assistant) in the nav bar it does not have useful behavior. Can we disable long-tap for mobile web? Not sure if PWA supports that somehow, maybe in PWA config or as a modifier on each link or a tailwind thing?

• [x] On iPad PWA, the whole page can scroll up and down a bit rather than being fixed (or rather, just having the conversation scroll). This is most evident on a brand new conversation. Try scrolling the main area. But even on a long conversation if you put your finger near the composer area then you can scroll the full page up and down separately from just scrolling the conversation messages.

• [x] The logo needs a little more whitespace around it, it's a bit too close to the edge. Here you can see it as compared with a few other logos

  • 

• [x] Our logo is stretched on the iPad splash screen (it looks fine on mobile) — this is a known iOS bug: https://github.com/elegantapp/pwa-asset-generator/issues/93

  • 

• [x] We should disable all hover tooltips on mobile. With the touch screen, the tooltip doesn't appear until you tap and then it's left sitting on screen. So, for example, when you send a chat message you still see "send message" tooltip above the submit button after you've tapped it. Tooltips aren't appropriate on mobile.

• [x] When you open the nav bar on mobile there is a weird black line at the top, we should hide this:

• [x] We need to make room at the bottom of the page for the iOS grab handle. The tricky thing is, some iOS devices need that extra space and others don't. React Native (and I believe Swift) solve this by the concept of safe area (react native can wrap the view in SafeAreaProvider and it just does the right thing). Does an equivalent exist in PWA apps?

• [x] When you try to scroll outside of the scroll box (because you reach the top and the bottom) it moves the header and footer. Here I'm pulling down. There is some fix for this with CSS but I forget what it is

[krschacht]

@jasonpaulso I had accidentally marked this PWA issue as complete but there are still some improvements. I just cleaned this up to it's up to date. If you feel so inclined :) the top two items on this list would be particularly impactful. Some of the others might be easy too.

[jasonpaulso]

Absolutely @krschacht I can work on the remaining items

[jasonpaulso]

@krschacht just letting you know that I'm still working on this. I think I've sorted a few points and a few others I'm noodling on.

[krschacht]

Thanks @jasonpaulso , you're awesome. And in case you didn't notice yet, a couple days ago, I slipped a new one to the very top of the list. As I've been using the mobile experience more, this might be the single biggest usability issue.

[krschacht]

@jasonpaulso I just noticed a couple new small visual issues that seemed to crop up. I don’t know if these were part of the latest PR but I don’t think we had these a couple months ago.

First, here is a screenshot:

1. In the top left corner, as the assistants scroll beneath the sticky assistant there is a little gap where they are visible. We used to have a spacer element in this slot that existed solely to fill it so we don’t see these peeking through.
2. At the bottom of the screen, the left sidebar has a dark gray background which no longer extends to the very bottom of the screen and, actually, I guess the main right column has a light gray background which also doesn’t extend. I know we added that extra space for the iOS menu handle but I was pretty sure that this extra space only pushed up the contents of the main column whereas now it’s actually pushing up the whole page.

These are small visual things, but I thought I’d mention while things are fresh b/c maybe you might immediately know what caused these.

[jasonpaulso]

I’d say it’s likely related to something I’ve done. I can sort it out on Monday!

On Jun 12, 2024, at 7:03 PM, Keith Schacht @.***> wrote:

@jasonpaulso https://github.com/jasonpaulso I just noticed a couple new small visual issues that seemed to crop up. I don’t know if these were part of the latest PR but I don’t think we had these a couple months ago.

First, here is a screenshot: image.png (view on web) https://github.com/AllYourBot/hostedgpt/assets/35061/6b6a58fd-2eea-466a-b2d8-6340fd0a4b52 In the top left corner, as the assistants scroll beneath the sticky assistant there is a little gap where they are visible. We used to have a spacer element in this slot that existed solely to fill it so we don’t see these peeking through. At the bottom of the screen, the left sidebar has a dark gray background which no longer extends to the very bottom of the screen and, actually, I guess the main right column has a light gray background which also doesn’t extend. I know we added that extra space for the iOS menu handle but I was pretty sure that this extra space only pushed up the contents of the main column whereas now it’s actually pushing up the whole page. These are small visual things, but I thought I’d mention while things are fresh b/c maybe you might immediately know what caused these.

— Reply to this email directly, view it on GitHub https://github.com/AllYourBot/hostedgpt/issues/298#issuecomment-2164035145, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACT5ZUSBP4XRC43YDPVFFHDZHDHVXAVCNFSM6AAAAABGVZWECCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNRUGAZTKMJUGU. You are receiving this because you were mentioned.