From 0f344accd66baaf5339956349101ebf7a3f7206c Mon Sep 17 00:00:00 2001
From: Timothee Guerin <tiguerin@microsoft.com>
Date: Thu, 6 Jun 2024 13:18:46 -0700
Subject: [PATCH] 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)
---
 .../fix-playground-styles-overflow-2024-5-6-19-45-49.md   | 8 ++++++++
 packages/playground/src/react/editor.tsx                  | 2 +-
 .../src/react/output-tabs/output-tabs.module.css          | 1 +
 packages/playground/src/react/playground.module.css       | 5 +++++
 packages/playground/src/react/playground.tsx              | 2 +-
 5 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 .chronus/changes/fix-playground-styles-overflow-2024-5-6-19-45-49.md

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 000000000..0fb6b3970
--- /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 bb21acba3..1cdce0579 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 89228b768..ef98e3a5c 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 80fcee124..6f6b9ac94 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 b67799983..6a36f32fc 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}