feature: Responsive launches UI

[jamesread]

TODO: Writing description - come back in a few mins

This PR introduces a functional responsive UI for at least the "launches" part of the web interface, which is obviously the most important. I didn't want to go /too/ far, but at least this makes Positz pretty usable on mobile.

Below are many before/after screenshots.

Launches UI

BEFORE - Desktop - Firefox

BEFORE - iPhone 12 Pro - Firefox

Problems;

• The page scrolls sideways
• The header menu scrolls off the page
• The "systray icons" are off the page
• The calendar is too small to be usable or clickable

AFTER - Desktop - Firefox (no visual change, even if the structure of the header is now different in the HTML);

Just posting this to prove I didn't break compatibility with the current UI.

AFTER - iPhone 12 Pro - Firefox

The header automatically re-organizes to make use of the minimal screen space, and automatically expands to the full-width in the above desktop version. Zero side-scrolling in a screen width of just 390px. :-)

AFTER - iPhone 12 Pro - Chrome & Dark Mode

Posting UI

BEFORE - Desktop - Firefox

Problems;

• Cancel button is hidden

AFTER - Desktop - Firefox (no visual change, even if the structure of the HTML is now different)

Just posting this to prove I didn't break compatibility with the current UI. Fixed the cancel button in light mode.

BEFORE - iPhone 12 Pro - Firefox

Problems;

• The preview displays side by side, making the screen scroll
• The dialog buttons scroll off the left of the page
• The two "panels" overlap

AFTER - iPhone 12 Pro - Firefox

Note: Certainly not perfect, but it's functional in the "after" version, whereas it's unusable in the current version. The preview is moved to the bottom in small screen widths, making it just scroll vertically. The buttons don't sroll off the page.

I think this general dialog could do with some overall UI improvements, so I didn't go too far with this, but just wanted to make it functional.

After - iPhone 12 Pro - Chrome & Dark Mode

Notes

• All the responsive changes were made with idiomatic tailwind CSS to the best of my knowledge (first time using tailwind).
• Small markup changes were made in a couple of places to give IDs to elements (not used for styling), because it was driving me insane to find where elements were defined in the source. Adding IDs makes them easy to grep for!
• The "div soup" started to annoy me, and I changed one tag name - one div to a to start doing symantic HTML. We could make a lot of changes like that going forward to help people to accessibility needs.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
gitroom	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 5, 2024 4:19pm

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
postiz	⬜️ Ignored (Inspect)			Nov 5, 2024 4:19pm

[egelhaus]

Good Job with that!
That'll be very helpful 👍

[bayraak]

Nice work!

[nevo-david]

Awesome! tested it!
Thank you so much!

[nevo-david]

There is one conflict there, mind solving it @jamesread ? :)

[jamesread]

Hey @nevo-david , thanks so much. I'm happy with this one, I think a bunch of folks will appreciate basic mobile "support".

There weren't merge conflicts when I created this, but I merged another PR last night that caused merge conflicts here. Anyway, resolved now. All CI jobs completed successfully, and you've signed off - so I'm merging this now :-)