Fix some styles in the playground with overflow (#3542)

FIx: 
- Hover popup would get croped 


![image](https://github.com/microsoft/typespec/assets/1031227/a2b975d5-47af-4e4a-b547-f56b8c4e3668)
- tabs overlap

![image](https://github.com/microsoft/typespec/assets/1031227/8919ec99-eb15-4197-a6c2-817f8d29fd17)

.chronus/changes/fix-playground-styles-overflow-2024-5-6-19-45-49.md

@@ -0,0 +1,8 @@
+---
+# Change versionKind to one of: internal, fix, dependencies, feature, deprecation, breaking
+changeKind: fix
+packages:
+  - "@typespec/playground"
+---
+
+Fix issue where hover tooltip would be cropped or not visible

packages/playground/src/react/editor.tsx

@@ -53,7 +53,7 @@ export const Editor: FunctionComponent<EditorProps> = ({ model, options, actions
   return (
     <div
       className="monaco-editor-container"
-      style={{ width: "100%", height: "100%", overflow: "hidden" }}
+      style={{ width: "100%", height: "100%" }}
       ref={editorContainerRef}
       data-tabster='{"uncontrolled": {}}' // https://github.com/microsoft/tabster/issues/316
     ></div>

packages/playground/src/react/output-tabs/output-tabs.module.css

@@ -1,6 +1,7 @@
 .tabs {
   border-bottom: 1px solid var(--colorNeutralStroke1);
   box-shadow: var(--shadow2);
+  overflow-y: auto;
 }
 
 .tab-divider {

packages/playground/src/react/playground.module.css

@@ -5,3 +5,8 @@
   height: 100%;
   overflow: hidden;
 }
+
+.edit-pane {
+  display: flex;
+  flex-direction: column;
+}

packages/playground/src/react/playground.tsx

@@ -261,7 +261,7 @@ export const Playground: FunctionComponent<PlaygroundProps> = (props) => {
         <SplitPane sizes={verticalPaneSizes} onChange={onVerticalPaneSizeChange} split="horizontal">
           <Pane>
             <SplitPane initialSizes={["50%", "50%"]}>
-              <Pane>
+              <Pane className={style["edit-pane"]}>
                 <EditorCommandBar
                   host={host}
                   selectedEmitter={selectedEmitter}