PLU-311: [GSIB-2] reduce font size on gsib browser (#780) (#788)

## Problem
Plumber looks zoomed in on GSIB

## Solution
By using the method in the previous PR. We simulate a zoom out by
setting the font-size to a smaller value than 16 (i.e. 14). This works
seemingly well since we use `rem` as much as possible.

Author: pregnantboy

packages/frontend/src/components/ThemeProvider/index.tsx

@@ -6,6 +6,7 @@ import {
 } from '@mui/material/styles'
 import { ThemeProvider as ChakraThemeProvider } from '@opengovsg/design-system-react'
 
+import { useDefaultZoom } from '@/hooks/useGovtBrowser'
 import materialTheme from '@/styles/theme'
 
 import { theme as chakraTheme } from '../../theme'
@@ -19,6 +20,7 @@ const ThemeProvider = ({
 }: ThemeProviderProps): React.ReactElement => {
   // This is a workaround to fix the issue of toasts appearing behind modal overlays
   const ref = useRef<HTMLDivElement>(null)
+  useDefaultZoom()
   return (
     <ChakraThemeProvider
       theme={chakraTheme}

packages/frontend/src/hooks/useGovtBrowser.ts

@@ -0,0 +1,23 @@
+/**
+ * Use this hook to check if user is proxied via Menlo Security, if so, prepend the proxy url
+ * When proxied, the window.name property is set to "JSON:{\"safe_rid\":\"4vnqcfBf\",\"mpa_id\":\"\",\"cid\":\"******\",
+ * \"cluster_id\":\"od_menlo_2b\",\"tab_id\":1,\"protocol_domain\":\"xhr-asia-southeast1-menlo-view.menlosecurity.com\",
+ * \"cluster_domain\":\"asia-southeast1-menlo-view.menlosecurity.com\",\"inspect_domain\":\"asia-southeast1-menlo-view.menlosecurity.com\"}"
+ * We check for existence of "menlo-view.menlosecurity.com" in window.name to determine if we should prepend the proxy url
+ */
+
+import { useEffect } from 'react'
+
+const isGovtBrowser = window.name?.includes('menlo-view.menlosecurity.com')
+
+const useDefaultZoom = () => {
+  useEffect(() => {
+    if (!isGovtBrowser) {
+      return
+    }
+    // Set html font size to 14px
+    document.documentElement.style.fontSize = '14px'
+  }, [])
+}
+
+export { useDefaultZoom }