[dev-overlay] disable font ligatures (#77865)

### Why?

The font ligatures on code frames like `!==` may negatively affect the
users by the readability and inconsistency with their editor.

| Before | After |
|--------|--------|
| ![CleanShot 2025-04-05 at 18 57
57@2x](https://github.com/user-attachments/assets/ac4e4dc0-934a-4422-8006-3cd29726d48c)
| ![CleanShot 2025-04-05 at 18 58
20@2x](https://github.com/user-attachments/assets/2fe497d5-fe21-4255-91f5-b3bf917df4ba)
|

Author: devjiwonchoi

packages/next/src/client/components/react-dev-overlay/ui/container/errors.stories.tsx

@@ -134,17 +134,17 @@ const runtimeErrors: ReadyRuntimeError[] = [
   {
     id: 4,
     runtime: true,
-    error: new Error('Fourth error message'),
+    error: new Error('typeof window !== undefined'),
     frames: () =>
       Promise.resolve([
         {
           error: true,
-          reason: 'Fourth error message',
+          reason: 'typeof window !== undefined',
           external: false,
           ignored: false,
           sourceStackFrame,
           originalStackFrame,
-          originalCodeFrame: originalCodeFrame('Fourth error message'),
+          originalCodeFrame: originalCodeFrame('typeof window !== undefined'),
         },
       ]),
   },

packages/next/src/client/components/react-dev-overlay/ui/styles/base.tsx

@@ -33,6 +33,7 @@ export function Base({ scale = 1 }: { scale?: DevToolsScale }) {
             'Source Sans Pro', sans-serif;
 
           font-family: var(--font-stack-sans);
+          font-variant-ligatures: none;
 
           /* TODO: Remove replaced ones. */
           --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);