diff --git a/examples/lazy-auth-server/server.ts b/examples/lazy-auth-server/server.ts index fe7b1acb5..6670b3e80 100644 --- a/examples/lazy-auth-server/server.ts +++ b/examples/lazy-auth-server/server.ts @@ -414,20 +414,36 @@ async function handleAuthorize(req: Request, res: Response) { if (state) denyUrl.searchParams.set("state", state); res.type("text/html").send(/*html*/ ` Authorize + +.actions{display:flex;flex-wrap:wrap;gap:12px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} +.btn{box-sizing:border-box;flex:1;min-height:56px;min-width:56px;display:flex;align-items:center;justify-content:center; +padding:12px 20px;font-size:16px;font-weight:bold;border:none;border-radius:8px;cursor:pointer; +text-decoration:none;color:#fff;touch-action:manipulation;-webkit-tap-highlight-color:transparent} +.btn:active{filter:brightness(0.8)} +.approve{background:#1a7a3e}.deny{background:#b91c1c}

🔑 Mock Authorization

An application is requesting access:

Client
${escapeHtml(client_id ?? "(none)")}
Scope
${escapeHtml(scope ?? "(default)")}
Redirect
${escapeHtml(redirect_uri)}
- - -
`); +
+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,