fix(site): resize terminal when dismissing warning (#8028)

.vscode/settings.json

@@ -212,11 +212,5 @@
   // We often use a version of TypeScript that's ahead of the version shipped
   // with VS Code.
   "typescript.tsdk": "./site/node_modules/typescript/lib",
-  "grammarly.selectors": [
-    {
-      "language": "markdown",
-      "scheme": "file",
-      "pattern": "docs/contributing/frontend.md"
-    }
-  ]
+  "prettier.prettierPath": "./node_modules/prettier"
 }

site/src/pages/TerminalPage/TerminalPage.tsx

@@ -17,7 +17,7 @@ import { terminalMachine } from "../../xServices/terminal/terminalXService"
 import { useProxy } from "contexts/ProxyContext"
 import Box from "@mui/material/Box"
 import { useDashboard } from "components/Dashboard/DashboardProvider"
-import { Region } from "api/typesGenerated"
+import { Region, WorkspaceAgent } from "api/typesGenerated"
 import { getLatencyColor } from "utils/latency"
 import Popover from "@mui/material/Popover"
 import { ProxyStatusLatency } from "components/ProxyStatusLatency/ProxyStatusLatency"
@@ -29,6 +29,46 @@ export const Language = {
   websocketErrorMessagePrefix: "WebSocket failed: ",
 }
 
+const useTerminalWarning = ({
+  agent,
+  fitAddon,
+}: {
+  agent?: WorkspaceAgent
+  fitAddon: FitAddon | null
+}) => {
+  const lifecycleState = agent?.lifecycle_state
+  const [startupWarning, setStartupWarning] = useState<
+    TerminalPageAlertType | undefined
+  >(undefined)
+  const shouldDisplayWarning = startupWarning !== undefined
+
+  useEffect(() => {
+    if (lifecycleState === "start_error") {
+      setStartupWarning("error")
+    } else if (lifecycleState === "starting") {
+      setStartupWarning("starting")
+    } else {
+      setStartupWarning((prev) => {
+        if (prev === "starting") {
+          return "success"
+        }
+        return undefined
+      })
+    }
+  }, [lifecycleState])
+
+  // Resize the terminal when the warning toggles
+  useEffect(() => {
+    if (fitAddon) {
+      fitAddon.fit()
+    }
+  }, [shouldDisplayWarning, fitAddon])
+
+  return {
+    startupWarning,
+  }
+}
+
 const TerminalPage: FC = () => {
   const navigate = useNavigate()
   const styles = useStyles()
@@ -77,32 +117,16 @@ const TerminalPage: FC = () => {
     websocketError,
   } = terminalState.context
   const reloading = useReloading(isDisconnected)
-  const lifecycleState = workspaceAgent?.lifecycle_state
-  const [startupWarning, setStartupWarning] = useState<
-    TerminalPageAlertType | undefined
-  >(undefined)
-
-  useEffect(() => {
-    if (lifecycleState === "start_error") {
-      setStartupWarning("error")
-    } else if (lifecycleState === "starting") {
-      setStartupWarning("starting")
-    } else {
-      setStartupWarning((prev) => {
-        if (prev === "starting") {
-          return "success"
-        }
-        return undefined
-      })
-    }
-  }, [lifecycleState])
-
   const dashboard = useDashboard()
   const proxyContext = useProxy()
   const selectedProxy = proxyContext.proxy.proxy
   const latency = selectedProxy
     ? proxyContext.proxyLatencies[selectedProxy.id]
     : undefined
+  const { startupWarning } = useTerminalWarning({
+    agent: workspaceAgent,
+    fitAddon,
+  })
 
   // handleWebLink handles opening of URLs in the terminal!
   const handleWebLink = useCallback(

site/src/pages/TerminalPage/TerminalPageAlert.tsx

@@ -91,6 +91,7 @@ export default ({ alertType }: { alertType: TerminalPageAlertType }) => {
   return (
     <Alert
       severity={mapAlertTypeToText[alertType].severity}
+      sx={{ borderRadius: 0 }}
       dismissible
       actions={[
         <Button