From 028bfcaaf8cb58f74e24a10455e141e7671b2c1a Mon Sep 17 00:00:00 2001 From: Mel Ludowise Date: Wed, 15 Jul 2026 19:49:46 -0700 Subject: [PATCH] Make lazy-auth-server usable on mobile MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The consent page shipped without a viewport meta tag, so mobile browsers laid it out at a desktop width. Its Approve/Deny buttons were 37px tall and nested a - -`); +
+Approve +Deny +
+ + +`); return; } diff --git a/examples/lazy-auth-server/src/mcp-app.css b/examples/lazy-auth-server/src/mcp-app.css index ba4f323d3..800b22499 100644 --- a/examples/lazy-auth-server/src/mcp-app.css +++ b/examples/lazy-auth-server/src/mcp-app.css @@ -17,9 +17,17 @@ display: flex; flex-wrap: wrap; gap: var(--spacing-sm); + /* Keep a long press on or near the buttons from starting text selection + or raising the iOS callout menu instead of a click. */ + -webkit-user-select: none; + user-select: none; + -webkit-touch-callout: none; } button { + /* Match the consent page's 56px tap targets (server.ts .btn). */ + min-height: 56px; + min-width: 56px; padding: var(--spacing-sm) var(--spacing-md); border: none; border-radius: var(--border-radius-md); @@ -27,12 +35,20 @@ button { font-weight: var(--font-weight-bold); background-color: var(--color-accent); cursor: pointer; + /* Suppress the double-tap-to-zoom gesture so a tap resolves to a click + immediately instead of waiting to see if a second tap follows. */ + touch-action: manipulation; + -webkit-tap-highlight-color: transparent; &:disabled { opacity: 0.5; cursor: not-allowed; } + &:active:not(:disabled) { + filter: brightness(0.85); + } + &:hover:not(:disabled) { background-color: color-mix( in srgb,