From 8da0e60c202c1d4164703aaf3155e5e880dcdb94 Mon Sep 17 00:00:00 2001
From: ScreenTinker <hello@screentinker.com>
Date: Tue, 21 Apr 2026 18:52:53 -0500
Subject: [PATCH] Mobile: public-facing pages (landing + login)

Login view:
- Remove `margin-left: calc(-1 * var(--sidebar-width))` from the
  centering wrapper. It was a hack to compensate for the sidebar
  offset, but app.js already zeros the app margin on the login
  route. On mobile this was pushing the login card ~240px off
  the left edge of the viewport.
- Use min-height + padding so the card breathes on short screens.
- Drop inline font-size:11px on the support-token input so the
  global .input 16px mobile rule applies (iOS focus-zoom prevention).

app.js:
- Hide the mobile hamburger button on the login route; it has no
  function there since the sidebar is already hidden.

Landing page:
- Scope the old blanket `.nav-links { display: none }` to hide only
  the section anchors + secondary Sign In button, so the primary
  "Start Free Trial" CTA stays visible on mobile.
- Wrap the 5-column Compare table in a horizontal-scroll container
  and set min-width:560px so it scrolls instead of overflowing
  the page.
- Add min-height:44px to .btn on mobile, tighten section padding
  to 16px (from 24px) so content doesn't feel cramped against
  the viewport edge.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend/js/app.js         |  4 ++++
 frontend/js/views/login.js |  6 +++---
 frontend/landing.html      | 20 ++++++++++++++++++--
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/frontend/js/app.js b/frontend/js/app.js
index e43b456..b713f96 100644
--- a/frontend/js/app.js
+++ b/frontend/js/app.js
@@ -64,6 +64,8 @@ function route() {
   if (hash === '#/login') {
     sidebar.style.display = 'none';
     app.style.marginLeft = '0';
+    const mb = document.getElementById('mobileMenuBtn');
+    if (mb) mb.style.display = 'none';
     currentView = login;
     login.render(app);
     return;
@@ -72,6 +74,8 @@ function route() {
   // Show sidebar for authenticated views
   sidebar.style.display = '';
   app.style.marginLeft = '';
+  const mb = document.getElementById('mobileMenuBtn');
+  if (mb) mb.style.display = '';
 
   // Update user info in sidebar
   updateSidebarUser();
diff --git a/frontend/js/views/login.js b/frontend/js/views/login.js
index a86e4d2..b8cc660 100644
--- a/frontend/js/views/login.js
+++ b/frontend/js/views/login.js
@@ -14,8 +14,8 @@ export async function render(container) {
   const isSetup = config.needsSetup;
 
   container.innerHTML = `
-    <div style="display:flex;align-items:center;justify-content:center;height:100vh;margin-left:calc(-1 * var(--sidebar-width))">
-      <div style="width:400px;max-width:90vw">
+    <div style="display:flex;align-items:center;justify-content:center;min-height:100vh;padding:16px">
+      <div style="width:400px;max-width:100%">
         <div style="text-align:center;margin-bottom:32px">
           <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" style="margin:0 auto 12px">
             <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
@@ -117,7 +117,7 @@ export async function render(container) {
         <details style="margin-top:16px">
           <summary style="font-size:11px;color:var(--text-muted);cursor:pointer;text-align:center">Support Access</summary>
           <div style="margin-top:8px">
-            <input type="text" id="supportToken" class="input" placeholder="Paste support token" style="font-family:monospace;font-size:11px">
+            <input type="text" id="supportToken" class="input" placeholder="Paste support token" style="font-family:monospace">
             <button class="btn btn-secondary" id="supportLoginBtn" style="width:100%;justify-content:center;padding:8px;margin-top:6px;font-size:12px">Authenticate with Support Token</button>
           </div>
         </details>
diff --git a/frontend/landing.html b/frontend/landing.html
index 6f90783..c5d3e4e 100644
--- a/frontend/landing.html
+++ b/frontend/landing.html
@@ -117,13 +117,27 @@
     footer { max-width:1200px; margin:0 auto; padding:40px 24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; border-top:1px solid var(--border); }
     footer .links a { color:var(--dim); margin-left:16px; font-size:13px; }
 
+    /* Horizontal-scroll wrapper for wide tables on mobile */
+    .table-scroll { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
+
     @media (max-width:768px) {
-      .nav-links { display:none; }
+      /* Hide section anchor links + the secondary Sign In button; keep primary CTA */
+      .nav-links a:not(.btn), .nav-links a.btn-outline { display:none; }
+      .nav-links { margin-left:auto; }
+      .nav-inner { padding:12px 16px; }
+
       .feature-grid { grid-template-columns:1fr; }
       .pricing-grid { grid-template-columns:1fr; }
-      .compare-table { font-size:12px; }
+      .compare-table { font-size:12px; min-width:560px; }
       .compare-table th, .compare-table td { padding:8px; }
       footer { flex-direction:column; text-align:center; }
+
+      /* 44px tap targets for all buttons on mobile */
+      .btn { min-height:44px; }
+      .hero { padding:110px 16px 60px; }
+      .features, .platforms, .pricing, .compare { padding:60px 16px; }
+      .cta { padding:60px 16px; }
+      .screenshot { padding:0 16px; margin-bottom:60px; }
     }
   </style>
 </head>
@@ -209,6 +223,7 @@
   <!-- Compare -->
   <section class="compare" id="compare">
     <h2>How We Compare</h2>
+    <div class="table-scroll">
     <table class="compare-table">
       <thead><tr><th></th><th style="color:var(--accent);font-weight:700">ScreenTinker</th><th>Yodeck</th><th>ScreenCloud</th><th>OptiSigns</th></tr></thead>
       <tbody>
@@ -226,6 +241,7 @@
         <tr><td>Hardware Lock-in</td><td class="yes">None</td><td>RPi focused</td><td>Chromecast</td><td>Various</td></tr>
       </tbody>
     </table>
+    </div>
   </section>
 
   <!-- CTA -->