Mobile review found that account payment rows could collapse labels vertically and several secondary links had small touch targets on narrow phones. The patch keeps the existing visual system but allows account rows to stack on mobile, improves tap height, and tightens the Scan Terminal narrow-screen container. Constraint: Must keep the current desktop layout and avoid adding dependencies Rejected: Rebuild the account page layout wholesale | too broad for a targeted mobile audit Confidence: high Scope-risk: narrow Directive: Keep long account/payment identifiers breakable on narrow screens Tested: iPhone SE and iPhone 12 Playwright mobile audits show no horizontal overflow on checked pages Tested: npx tsc --noEmit --pretty false --project frontend/tsconfig.json Tested: npm run build Tested: npm run test:business Not-tested: Authenticated /ops data state because local Supabase/admin gating redirects to the public shell
60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
type Props = {
|
|
searchParams?: Promise<{ next?: string }>;
|
|
};
|
|
|
|
export default async function EntitlementRequiredPage({ searchParams }: Props) {
|
|
const params = (await searchParams) || {};
|
|
const nextPath = params.next || "/";
|
|
|
|
return (
|
|
<main
|
|
style={{
|
|
minHeight: "100vh",
|
|
display: "grid",
|
|
placeItems: "center",
|
|
background:
|
|
"radial-gradient(circle at 20% 20%, #13264f 0%, #071127 45%, #040812 100%)",
|
|
color: "#d6e2ff",
|
|
padding: "24px",
|
|
}}
|
|
>
|
|
<section
|
|
style={{
|
|
width: "100%",
|
|
maxWidth: 720,
|
|
border: "1px solid rgba(68, 92, 140, 0.45)",
|
|
borderRadius: 16,
|
|
padding: 24,
|
|
background: "rgba(9, 18, 36, 0.88)",
|
|
boxShadow: "0 20px 50px rgba(0, 0, 0, 0.35)",
|
|
}}
|
|
>
|
|
<h1 style={{ margin: 0, fontSize: 28, lineHeight: 1.2 }}>
|
|
Entitlement Required
|
|
</h1>
|
|
<p style={{ marginTop: 12, color: "#9fb2da", lineHeight: 1.6 }}>
|
|
This dashboard is protected. If Supabase auth is enabled, please go to{" "}
|
|
<a
|
|
href={`/auth/login?next=${encodeURIComponent(nextPath)}`}
|
|
style={{
|
|
color: "#8fc5ff",
|
|
display: "inline-flex",
|
|
minHeight: 36,
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
/auth/login
|
|
</a>{" "}
|
|
to sign in first.
|
|
</p>
|
|
<p style={{ marginTop: 12, color: "#9fb2da", lineHeight: 1.6 }}>
|
|
Legacy mode still supports <code>?access_token=<your-token></code>.
|
|
</p>
|
|
<p style={{ marginTop: 12, color: "#9fb2da", lineHeight: 1.6 }}>
|
|
Requested path: <code>{nextPath}</code>
|
|
</p>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|