PWA improvements

[ungaul]

Could anyone fix the CSS? The WebUI simply need a

html,body{
height:100vh;
background: #000;
overflow:none;
}

Also, a dark color as meta tag and fullscreen in manifest.json for the PWA would be great to make the webui work as a standalone app on phones.

[jjmata]

Can you explain a little more? What observed behavior are you fixing with this CSS change? Where in the Tailwind files do you think this should live? What are you trying to accomplish? Just "Feature request" leaves us wondering what it is about ... :-)

[ungaul]

My bad, I should have indeed been more precise.
As for now, the main interface containers (html and body) are not restrained, which leads to this (if we scroll outside of the right pane).

What I advise is to first restrain the containers to avoid this.
Also to allow the PWA to work properly, I advise setting a background color corresponding to the color of the theme, and meta tags/manifest.json color to match with the interface.
The reason for that is that when installing the PWA, the top/bottom bar does not match the theme.

[jjmata]

Took me a bit to find it, but #69 addresses some of the same concerns (on mobile at least) ... could you take a look at it and maybe complement to it with your CSS suggestion, @ungaul?

[ungaul]

I am not a developer, but here is what I did. I tried #69 and edited logo-pwa.png to fit Apple PWA (some padding for the logo + dark background because Apple PWA defaults to light backgrounds, which doesn't fit the new logo). In addition, I edited the CSS in mailer.html.erb like this to avoid the overflow while scrolling.

      body {
        background-color: #f8fafc;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        line-height: 1.5;
        margin: 0;
        padding: 0;
        height: 100vh;
        overflow: hidden;
      }
      html {
        height: 100vh;
        overflow: hidden;
      }

Tried on an iPhone 13 mini, it works flawlessly.

[ungaul]

Once again I am not a dev but I believe that with these modifications the PR is ready.
Here are some screenshots :

[jjmata]

I've tested PR #69 and on-device it actually renders too close to the bottom now:

[alessiocappa]

I've tested PR #69 and on-device it actually renders too close to the bottom now:

@jjmata I gave it a try with #172, can you check if it works for you?

[ByteBard11]

I've tested PR #69 and on-device it actually renders too close to the bottom now:

@jjmata I gave it a try with #172, can you check if it works for you?

@alessiocappa I've tried your merge and am having issues with the bottom area (see screenshot) and the profiler, which gets cut off by the curve of the device (screenshot ignores curves), in PWA mode on iOS 26.0.1.

@jjmata I have adjusted #69 to fix the bottom spacing issue you had.

[alessiocappa]

I've tested PR #69 and on-device it actually renders too close to the bottom now:

@jjmata I gave it a try with #172, can you check if it works for you?

@alessiocappa I've tried your merge and am having issues with the bottom area (see screenshot) and the profiler, which gets cut off by the curve of the device (screenshot ignores curves), in PWA mode on iOS 26.0.1.

@jjmata I have adjusted #69 to fix the bottom spacing issue you had.

You’re right, I forgot to add the changes on the profiler class. Anyway, I’ve seen you’ve reopened your PR, so I think we can keep that and I’ll close mine.