[Bug]: TubeArchivist isn't responsive on chrome based browser mobile screens (regression)

[adan89lion]

I've read the documentation

• I'm running the latest version of Tube Archivist and have read the release notes.
• I have read the how to open an issue guide, particularly the bug report section.

Operating System

Synology DSM 6.2 (64521)

Your Bug Report

Describe the bug

When accessing TubeArchivist from mobile devices, the website isn't responsive to small displays. This bug appears after 0.4.3 release, and still persists on 0.4.4 (latest) release. My test device is Samsung Galaxy S23 Ultra (on Android 14) and Google Chrome 119.0.6045.163.

Steps To Reproduce

1. Upgrade to post TubeArchivist 0.4.3 release (where is bug happens).
2. Browse the TubeArchivist instance from any mobile device.
3. Notice the cropped-out webpage format, users are required to zoom-out to access some features.

Expected behavior

1. The webpage should be responsive and adjusted for mobile experience.

Relevant log output

N/A

Anything else?

This is a screenshot of TubeArchivist installed as a PWA, indicating the cropped-out page.

[trafficman]

I can reproduce this cropping behavior in Chrome on desktop (it begins at the extreme edge of tablet mode), but Firefox behaves as expected (Firefox on top, Chrome on bottom, the mobile versions of both also behave identically):

For whatever reason, Chrome (I tested in Edge as well with the same results, it's likely all Chromium based browsers) seems to be behaving as if "width: 100%;" is absent from the top-banner style sheet, removing it in Firefox creates the same behavior:

A current temporary workaround could be to use Firefox mobile when accessing TA from a phone

[bbilly1]

That must have been introduced in #583. @extome9000 can you look into this?

Or anybody using mobile chrome...

But yes, scaling on mobile firefox is working fine.

[extome9000]

I did some testing and can confirm that it seems to be affecting Chromium browsers. I tested Brave, Chrome, Edge, and Vivaldi and they all have the same problem. trafficman's explanation is correct.
I used the content: var(--banner) attribute because it was very convenient for setting a specific banner per theme. I'll try and see if I can find a fix or workaround.

[bbilly1]

Thanks for reporting, fixed merged in v0.4.5, please update.