diff --git a/.chronus/changes/fix-playground-styles-overflow-2024-5-6-19-45-49.md b/.chronus/changes/fix-playground-styles-overflow-2024-5-6-19-45-49.md
new file mode 100644
index 0000000000..0fb6b39703
--- /dev/null
+++ b/.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
diff --git a/packages/playground/src/react/editor.tsx b/packages/playground/src/react/editor.tsx
index bb21acba39..1cdce05796 100644
--- a/packages/playground/src/react/editor.tsx
+++ b/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>
diff --git a/packages/playground/src/react/output-tabs/output-tabs.module.css b/packages/playground/src/react/output-tabs/output-tabs.module.css
index 89228b7686..ef98e3a5c3 100644
--- a/packages/playground/src/react/output-tabs/output-tabs.module.css
+++ b/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 {
diff --git a/packages/playground/src/react/playground.module.css b/packages/playground/src/react/playground.module.css
index 80fcee1243..6f6b9ac94d 100644
--- a/packages/playground/src/react/playground.module.css
+++ b/packages/playground/src/react/playground.module.css
@@ -5,3 +5,8 @@
   height: 100%;
   overflow: hidden;
 }
+
+.edit-pane {
+  display: flex;
+  flex-direction: column;
+}
diff --git a/packages/playground/src/react/playground.tsx b/packages/playground/src/react/playground.tsx
index b677999830..6a36f32fc1 100644
--- a/packages/playground/src/react/playground.tsx
+++ b/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}