launchpad-reviewers team mailing list archive

Thread
Date

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

To: mp+461875@xxxxxxxxxxxxxxxxxx
From: Peter Makowski <mp+461875@xxxxxxxxxxxxxxxxxx>
Date: Wed, 06 Mar 2024 08:47:32 -0000
Reply-to: mp+461875@xxxxxxxxxxxxxxxxxx
Sender: noreply@xxxxxxxxxxxxx

Peter Makowski has proposed merging ~petermakowski/launchpad:feat-viewport-meta into launchpad:master.

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


Requested reviews:
  Launchpad code reviewers (launchpad-reviewers)

For more details, see:
https://code.launchpad.net/~petermakowski/launchpad/+git/launchpad/+merge/461875

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.

-- 
Your team Launchpad code reviewers is requested to review the proposed merge of ~petermakowski/launchpad:feat-viewport-meta into launchpad:master.

diff --git a/lib/lp/app/templates/root-index.pt b/lib/lp/app/templates/root-index.pt
index 3fb4c7e..bf7d58f 100644
--- a/lib/lp/app/templates/root-index.pt
+++ b/lib/lp/app/templates/root-index.pt
@@ -6,6 +6,7 @@
   metal:use-macro="view/macro:page/main_only"
   i18n:domain="launchpad">
   <metal:head fill-slot="head_epilogue">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="/+icing/vanilla-framework-version-4.7.0.min.css" />
   </metal:head>
   <body>