improve css

Author: avivkeller

apps/site/pages/en/learn/typescript/introduction.md

@@ -70,17 +70,15 @@ npm add --save-dev @types/node
 
 These type definitions allow TypeScript to understand Node.js APIs and provide proper type checking and autocompletion when you use functions like `fs.readFile` or `http.createServer`. For example:
 
-```js
-import * as fs from 'fs';
-
-fs.readFile('example.txt', foo, (err, data) => {
-  //                       ^^^
-  // Argument of type '"foo"' is not assignable to parameter of type …
-  if (err) {
-    throw err;
-  }
-  console.log(data);
-});
+<!-- prettier-ignore -->
+```ts
+// @noErrors
+/* eslint-disable */
+// ---cut---
+import fs from 'fs';
+
+fs.read
+//     ^|
 ```
 
 Many popular JavaScript libraries have their type definitions available under the `@types` namespace, maintained by the DefinitelyTyped community. This enables seamless integration of existing JavaScript libraries with TypeScript projects.

packages/rehype-shiki/src/transformers/twoslash/index.css

@@ -16,3 +16,10 @@
     display: inline-block;
   }
 }
+
+.twoslash-completion-list {
+  display: block;
+  width: auto;
+  max-height: 100px;
+  overflow-x: auto;
+}

packages/rehype-shiki/src/transformers/twoslash/index.mjs

@@ -1,10 +1,10 @@
 import { transformerTwoslash } from '@shikijs/twoslash';
 
-const compose = ({ token, popup }) => [
+const compose = ({ token, cursor, popup }) => [
   {
     type: 'element',
     tagName: 'MDXTooltipTrigger',
-    children: [token],
+    children: [token || cursor],
     properties: { className: ['twoslash-hover'] },
   },
   popup,
@@ -27,6 +27,20 @@ export const twoslash = options =>
         errorToken: { tagName: 'MDXTooltip' },
         errorPopup: { tagName: 'MDXTooltipContent' },
         errorCompose: compose,
+
+        completionToken: {
+          tagName: 'MDXTooltip',
+          properties: {
+            open: true,
+          },
+        },
+        completionPopup: {
+          tagName: 'MDXTooltipContent',
+          properties: {
+            align: 'start',
+          },
+        },
+        completionCompose: compose,
       },
     },
     throws: false,