yourgov: Fix mobile by adding correct viewport meta tag (#1875)

agriculturegovau · Nov 11, 2024 · 2207de5 · 2207de5
1 parent 1fa56b9
commit 2207de5
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 22 deletions.
diff --git a/.changeset/happy-rabbits-wonder.md b/.changeset/happy-rabbits-wonder.md
@@ -0,0 +1,5 @@
+---
+'@ag.ds-next/yourgov': patch
+---
+
+yourgov: Fix mobile rendering by adding correct viewport meta tag.
diff --git a/yourgov/pages/_app.tsx b/yourgov/pages/_app.tsx
@@ -1,5 +1,6 @@
 import type { NextPage } from 'next';
 import type { AppProps } from 'next/app';
+import Head from 'next/head';
 import { useEffect, useState, type ReactElement, type ReactNode } from 'react';
 import { theme } from '@ag.ds-next/react/ag-branding';
 import { Core } from '@ag.ds-next/react/core';
@@ -33,27 +34,32 @@ export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
 	// Use the layout defined at the page level, if available
 	const getLayout = Component.getLayout ?? ((page) => page);
 	return (
-		<Core theme={theme} linkComponent={LinkComponent}>
-			<AuthProvider>
-				<LinkedBusinessesProvider>
-					{isAlertVisible && (
-						<GlobalAlert
-							tone="info"
-							title="We are planning a maintenance outage to upgrade the service on 22 November 2024 from 12pm to 5pm AEDT"
-							onClose={() => {
-								safeSessionStorage?.setItem('isGlobalAlertVisible', 'false');
-								setIsAlertVisible(false);
-							}}
-						>
-							<Text as="p">
-								You won’t be able to access yourGov during that time. We
-								apologise for any inconvenience.
-							</Text>
-						</GlobalAlert>
-					)}
-					{getLayout(<Component {...pageProps} />)}
-				</LinkedBusinessesProvider>
-			</AuthProvider>
-		</Core>
+		<>
+			<Head>
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+			</Head>
+			<Core theme={theme} linkComponent={LinkComponent}>
+				<AuthProvider>
+					<LinkedBusinessesProvider>
+						{isAlertVisible && (
+							<GlobalAlert
+								tone="info"
+								title="We are planning a maintenance outage to upgrade the service on 22 November 2024 from 12pm to 5pm AEDT"
+								onClose={() => {
+									safeSessionStorage?.setItem('isGlobalAlertVisible', 'false');
+									setIsAlertVisible(false);
+								}}
+							>
+								<Text as="p">
+									You won’t be able to access yourGov during that time. We
+									apologise for any inconvenience.
+								</Text>
+							</GlobalAlert>
+						)}
+						{getLayout(<Component {...pageProps} />)}
+					</LinkedBusinessesProvider>
+				</AuthProvider>
+			</Core>
+		</>
 	);
 }