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

## 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

@@ -6,7 +6,7 @@
  * We check for existence of "menlo-view.menlosecurity.com" in window.name to determine if we should prepend the proxy url
  */
 
-import { useCallback } from 'react'
+import { useCallback, useEffect } from 'react'
 
 const isGovtBrowser = window.name?.includes('menlo-view.menlosecurity.com')
 
@@ -21,4 +21,14 @@ const useProxyUrl = () => {
   return { createProxiedUrl }
 }
 
-export { useProxyUrl }
+const useDefaultZoom = () => {
+  useEffect(() => {
+    if (!isGovtBrowser) {
+      return
+    }
+    // Set html font size to 14px
+    document.documentElement.style.fontSize = '14px'
+  }, [])
+}
+
+export { useDefaultZoom, useProxyUrl }