Merge ~petermakowski/launchpad:feat-viewport-meta into launchpad:master

Proposed by Peter Makowski
Status: Merged
Approved by: Ines Almeida
Approved revision: 70273ecf946476fa6db6d5ad9c8c0297479c84a9
Merge reported by: Otto Co-Pilot
Merged at revision: not available
Proposed branch: ~petermakowski/launchpad:feat-viewport-meta
Merge into: launchpad:master
Diff against target: 12 lines (+1/-0)
1 file modified
lib/lp/app/templates/root-index.pt (+1/-0)
Reviewer Review Type Date Requested Status
Ines Almeida Approve
Review via email: mp+461875@code.launchpad.net

Commit message

feat: set viewport to match device width
- add meta viewport tag
- set initial zoom level to 1

Description of the change

This merge proposal adds meta viewport tag with settings that make launchpad homepage mobile-friendly by ensuring it scales correctly on different devices.

- width=device-width: sets the width of the viewport to match the screen's width in device-independent pixels
- initial-scale=1: sets the initial zoom level when the page is first loaded

## QA Steps
- Open developer tools
- Using device toolbar view page in mobile device dimensions
- Verify that the content is stacked as needed and does not overflow, look at the screenshot attached for reference

## Screenshots

### Before
https://share.cleanshot.com/Rqjzl4KP

### After
https://share.cleanshot.com/lSVFWkrd

---

Note: there are some spacing issues around the navigation bar on mobile, but this will be addressed separately.

To post a comment you must log in.
Revision history for this message
Ines Almeida (ines-almeida) wrote :

It's not ideal that the "log in" section is so crammed with the logo; but between that and the page being readable in small screens, it's best that the page as a whole is readable.

Also for non-logged in users (which first time users of the platform will always be), it actually looks OK: https://pasteboard.co/fa8dpje3C86c.png

We can address that in another MP, I think this is a nice improvement!
Thank you for the proposal!

review: Approve

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1diff --git a/lib/lp/app/templates/root-index.pt b/lib/lp/app/templates/root-index.pt
2index 3fb4c7e..bf7d58f 100644
3--- a/lib/lp/app/templates/root-index.pt
4+++ b/lib/lp/app/templates/root-index.pt
5@@ -6,6 +6,7 @@
6 metal:use-macro="view/macro:page/main_only"
7 i18n:domain="launchpad">
8 <metal:head fill-slot="head_epilogue">
9+ <meta name="viewport" content="width=device-width, initial-scale=1">
10 <link rel="stylesheet" href="/+icing/vanilla-framework-version-4.7.0.min.css" />
11 </metal:head>
12 <body>

Subscribers

People subscribed via source and target branches

to status/vote changes: