Padding and inset fixes

[jasonpaulso]

• Gemfile
  • auto-formatter added new line to end of file
• app/assets/stylesheets/application.tailwind.css
  • auto-formatter changed single to double quotes
  • adding min-height: -webkit-fill-available; to html css block
  • removing env(safe-area-inset-*) properties from body block
• app/views/assistants/_assistant.html.erb
  • misc. minor formatting changes
  • modifying padding and top properties on first nav assistant
• config/importmap.rb, vendor/javascript/tailwindcss--plugin.js, vendor/javascript/tailwindcss-safe-area.js
  • adding https://github.com/mvllow/tailwindcss-safe-area for a cleaner implementation of safe areas for tailwind
• config/tailwind.config.js
  • adding tailwindcss-safe-area plugin
• app/views/layouts/application.html.erb
  • implementing tailwindcss-safe-area classes in nav and main

[jasonpaulso]

• tailwindcss/plugin - this is a dependency installed when pinning "tailwindcss-safe-area"—doing what you figured.
• I'm not sure where I went off the (ahem) rails, but tell me if the change I've just made makes any difference for you. I know that I had things working before I PR'd, but I also recall doing it a few different ways... in fact I had come across that same s/o discussion at the time and thought I'd done the whole ../vendor bit. the whole importmap thing is new to me.

[krschacht]

@jasonpaulso Okay, yes, the tailwind loading issues are fixed and the page is now stretching to the bottom of the screen. So there is no bottom space problem any longer.

However, on my screen I was seeing the disclaimer text (HostedGPT can make mistakes) appearing beneath the iOS bottom screen grab handle (my iPad does not have a home button, it's the handle as the home button). I've been meaning to remove that text so I did that and left the div and that fixed it. :) But it's a bit sloppy because there is a div with an   and nothing else. Do you know how we can fix that so we don't have to leave the empty div or should we just leave it?

Also, while we're working on this page height stuff, in dark mode I still have a white top status bar. I did a little googling and realized we can simply change apple-mobile-web-app-status-bar-style meta tag from default (it's current value) to black-translucent. When I did this, the status bar now changes from white to dark based on light/dark mode! BUT... translucent causes the status bar to no longer have a height so the entire app slides up, re-exposing a white gap at the bottom of the screen.

I just did one commit. It contains the   fix but I reverted the app-status-bar back to default. Try pulling down this branch, change that to black-translucent and then—notably—you have to delete the PWA icon and re-add it in order for this to get picked up (not sure why). Any ideas on how to fix this?

[krschacht]

@jasonpaulso I went ahead and merged in, but if you have any thoughts on those two ^, let me know.

[jasonpaulso]

Yes! I do have thoughts! Well, about the status bar thing at least. I’ll have to look into the “ ” thing a bit to understand before I express any notion there. I haven’t been able to dig into this as much as I'd like over the past few weeks, but I expect to have a fair bit of time this week! I’ll let you know when I have comment or solutions.

On Jul 1, 2024, at 11:28 AM, Keith Schacht @.***> wrote:

@jasonpaulso https://github.com/jasonpaulso I went ahead and merged in, but if you have any thoughts on those two ^, let me know.

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

[krschacht]

Great! And I just fixed the   thing in another branch so ignore that one. I'll merge that in shortly (hopefully today but maybe tomorrow).