Wrap up the twoslash highlights

Author: orta

packages/documentation/copy/en/handbook-v2/Basics.md

@@ -343,7 +343,7 @@ let msg = "hello there!";
 Even though we didn't tell TypeScript that `msg` had the type `string` it was able to figure that out.
 That's a feature, and it's best not to add annotations when the type system would end up inferring the same type anyway.
 
-> Note: when you see <pre><code class="query">code comment colored like this</code></pre> it means that we're highlighting what your editor would show you inline. You can get the same experience in the web browser by hovering your mouse over blue-tinted code samples.
+> Note: the message bubble inside the code sample above. That is what your editor would show if you had hovered over the word.
 
 ## Erased Types
 

packages/typescriptlang-org/src/templates/markdown-twoslash.scss

@@ -27,6 +27,7 @@ pre {
 
   /* Important to allow the code to move horizontally; */
   overflow: auto;
+
   &.shiki {
     overflow: initial;
 
@@ -165,7 +166,7 @@ pre {
     background-color: #eeeeee;
     position: relative;
     top: -7px;
-    margin-left: 4px;
+    margin-left: 0.1rem;
     /* Edges */
     border-left: 1px solid #eeeeee;
     border-top: 1px solid #eeeeee;