fix: prevent Chrome auto-translate from crashing onboarding (#65)

* fix: prevent Chrome auto-translate from crashing React during onboarding

Chrome auto-translate modifies DOM text nodes when it detects a Swedish
page (lang="sv") in a browser set to English. React does not expect
external DOM mutations and throws, crashing the entire component tree
into global-error.tsx on every step transition.

Add translate="no" and <meta name="google" content="notranslate"> to
suppress browser translation. Also fix timezone-unsafe date parsing in
fiscal period validation (new Date("YYYY-MM-DD") + getDate() returns
local-timezone values, shifting dates by -1 day in Western timezones).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: add notranslate meta tag to global-error.tsx for consistency

Per review feedback — global-error.tsx renders its own <html> document,
so it needs the same <meta name="google" content="notranslate"> tag as
layout.tsx to fully suppress Chrome translation on error pages.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jakob Wennberg
2026-03-20 15:11:44 +01:00
committed by GitHub
co-authored by Claude Opus 4.6
parent db528c3652
commit 99bc462315
4 changed files with 38 additions and 26 deletions
+4 -1
View File
@@ -15,7 +15,10 @@ export default function GlobalError({
}, [error]);
return (
<html lang="sv">
<html lang="sv" translate="no">
<head>
<meta name="google" content="notranslate" />
</head>
<body>
<div className="flex min-h-screen items-center justify-center p-8">
<div className="text-center space-y-4">
+2 -1
View File
@@ -46,8 +46,9 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
<html lang="sv" suppressHydrationWarning className={`${geistSans.variable} ${geistMono.variable} ${fraunces.variable}`}>
<html lang="sv" translate="no" suppressHydrationWarning className={`${geistSans.variable} ${geistMono.variable} ${fraunces.variable}`}>
<head>
<meta name="google" content="notranslate" />
<link rel="apple-touch-icon" href="/icons/icon-192.png" />
<script
src="https://cdn.recapt.app/browser/glimt.js"