Honor Request Desktop Website on mobile browsers

poc/public/app.js

@@ -1,5 +1,29 @@
 "use strict";
 
+/*
+ * Request Desktop Website.
+ *
+ * Most browsers answer that request with a desktop-width layout viewport, and
+ * the width-driven layout follows. Some browsers only swap the user agent and
+ * keep the phone-width viewport, which would leave this page in the mobile
+ * layout the user just asked to escape. In that case, widen the viewport meta
+ * so the whole page lays out as desktop. It is not designed for a phone; the
+ * user asked for it.
+ */
+function desktopSiteRequested() {
+    if (!navigator.maxTouchPoints) return false;
+    if (/Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent)) return false;
+    // Tablets and touch laptops keep the normal responsive layout.
+    if (Math.min(window.screen.width, window.screen.height) > 500) return false;
+    return window.innerWidth <= 768;
+}
+
+if (desktopSiteRequested()) {
+    const meta = document.querySelector('meta[name="viewport"]');
+    if (meta) meta.setAttribute("content", "width=980");
+    document.documentElement.dataset.layout = "desktop";
+}
+
 const $ = (selector, root = document) => root.querySelector(selector);
 const $$ = (selector, root = document) => [...root.querySelectorAll(selector)];
 
@@ -1550,6 +1574,9 @@ const MOBILE_QUERY = window.matchMedia("(max-width: 768px)");
 const MOBILE_TABS = new Set(["users", "chat", "call", "activity"]);
 
 function isMobileLayout() {
+    // A narrow viewport in Request Desktop Website mode stays desktop: the user
+    // chose it, even if the browser did not widen the layout viewport.
+    if (document.documentElement.dataset.layout === "desktop") return false;
     return MOBILE_QUERY.matches;
 }