From 41df3ffcde68ba4d9ef569543d14a3602f453c27 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Thu, 23 Feb 2023 02:34:22 +0100
Subject: [PATCH 1/3] fix(website): correct issues with scrollbars in
 playground

---
 .../website/src/components/EditorTabs.tsx     | 27 +++++++++----------
 .../src/components/ErrorsViewer.module.css    |  1 -
 .../src/components/Playground.module.css      |  4 ++-
 .../website/src/components/Playground.tsx     |  9 ++++++-
 .../src/components/ast/ASTViewer.module.css   |  5 ++--
 5 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/packages/website/src/components/EditorTabs.tsx b/packages/website/src/components/EditorTabs.tsx
index 6edbee224220..0d961fb81d8d 100644
--- a/packages/website/src/components/EditorTabs.tsx
+++ b/packages/website/src/components/EditorTabs.tsx
@@ -2,21 +2,20 @@ import EditIcon from '@site/src/icons/edit.svg';
 import React from 'react';
 
 import styles from './Playground.module.css';
-import type { TabType } from './types';
 
-export interface FileTabsProps {
-  readonly tabs: TabType[];
-  readonly activeTab: TabType;
-  readonly change: (tab: TabType) => void;
-  readonly showModal: () => void;
+export interface FileTabsProps<T> {
+  readonly tabs: { value: T; label: string }[];
+  readonly activeTab: T;
+  readonly change: (tab: T) => void;
+  readonly showModal?: () => void;
 }
 
-export default function EditorTabs({
+export default function EditorTabs<T>({
   tabs,
   activeTab,
   change,
   showModal,
-}: FileTabsProps): JSX.Element {
+}: FileTabsProps<T>): JSX.Element {
   return (
     <div className={styles.tabContainer}>
       <div role="tablist">
@@ -25,17 +24,17 @@ export default function EditorTabs({
             <button
               role="tab"
               className={styles.tabStyle}
-              key={item}
-              aria-selected={activeTab === item}
-              disabled={activeTab === item}
-              onClick={(): void => change(item)}
+              key={item.label}
+              aria-selected={activeTab === item.value}
+              disabled={activeTab === item.value}
+              onClick={(): void => change(item.value)}
             >
-              {item}
+              {item.label}
             </button>
           );
         })}
       </div>
-      {activeTab !== 'code' && (
+      {activeTab !== 'code' && showModal && (
         <button className={styles.tabStyle} onClick={showModal}>
           Visual Editor
           <EditIcon width={12} height={12} />
diff --git a/packages/website/src/components/ErrorsViewer.module.css b/packages/website/src/components/ErrorsViewer.module.css
index 22178ae72acd..415e12d55fc7 100644
--- a/packages/website/src/components/ErrorsViewer.module.css
+++ b/packages/website/src/components/ErrorsViewer.module.css
@@ -9,7 +9,6 @@
   letter-spacing: 0;
   font-feature-settings: 'liga' 0, 'calt' 0;
   box-sizing: border-box;
-  white-space: break-spaces;
   margin: 0;
 }
 
diff --git a/packages/website/src/components/Playground.module.css b/packages/website/src/components/Playground.module.css
index d6189b238f55..31fc6a20988c 100644
--- a/packages/website/src/components/Playground.module.css
+++ b/packages/website/src/components/Playground.module.css
@@ -43,6 +43,7 @@
   height: calc(100% - var(--ifm-navbar-height));
   top: var(--ifm-navbar-height);
   z-index: calc(var(--ifm-z-index-fixed) - 1);
+  background: var(--playground-main-color);
 }
 
 .tabContainer {
@@ -53,7 +54,8 @@
 }
 
 .tabCode {
-  height: calc(100%);
+  height: calc(100% - 32px);
+  background: var(--code-editor-bg);
 }
 
 .tabStyle {
diff --git a/packages/website/src/components/Playground.tsx b/packages/website/src/components/Playground.tsx
index eabdb63f6721..e48c73c58b6f 100644
--- a/packages/website/src/components/Playground.tsx
+++ b/packages/website/src/components/Playground.tsx
@@ -49,6 +49,12 @@ function rangeReducer<T extends SelectedRange | null>(
   return prevState;
 }
 
+const fileTabs: { value: TabType; label: string }[] = [
+  { value: 'code', label: 'code' },
+  { value: 'tsconfig', label: 'tsconfig.json' },
+  { value: 'eslintrc', label: '.eslintrc.js' },
+];
+
 function Playground(): JSX.Element {
   const [state, setState] = useHashState({
     jsx: false,
@@ -129,11 +135,12 @@ function Playground(): JSX.Element {
             split="vertical"
             minSize="10%"
             defaultSize="50%"
+            pane2Style={{ overflow: 'hidden' }}
           >
             <div className={clsx(styles.sourceCode)}>
               {isLoading && <Loader />}
               <EditorTabs
-                tabs={['code', 'tsconfig', 'eslintrc']}
+                tabs={fileTabs}
                 activeTab={activeTab}
                 change={setTab}
                 showModal={(): void => setShowModal(activeTab)}
diff --git a/packages/website/src/components/ast/ASTViewer.module.css b/packages/website/src/components/ast/ASTViewer.module.css
index a0ae49a096c2..516ffc36a762 100644
--- a/packages/website/src/components/ast/ASTViewer.module.css
+++ b/packages/website/src/components/ast/ASTViewer.module.css
@@ -12,9 +12,9 @@
 .list,
 .subList {
   box-sizing: border-box;
-  white-space: break-spaces;
   margin: 0;
   padding-left: 1.5rem;
+  max-width: max-content;
 }
 
 .selected {
@@ -24,6 +24,7 @@
 .nonExpand,
 .expand {
   border-left: 0.1rem dashed var(--ifm-color-emphasis-200);
+  max-width: max-content;
 }
 
 .expand.open::before {
@@ -76,7 +77,7 @@
 
 .hidden {
   color: var(--token-color-comment);
-  max-width: 40%;
+  max-width: 200px;
   overflow: hidden;
   display: inline-block;
   text-overflow: ellipsis;

From b723b35d9b90e02f46d679c153b303b897f10036 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Thu, 23 Feb 2023 02:56:31 +0100
Subject: [PATCH 2/3] fix(website): correct sizing of elements

---
 packages/website/src/components/ast/ASTViewer.module.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/website/src/components/ast/ASTViewer.module.css b/packages/website/src/components/ast/ASTViewer.module.css
index 516ffc36a762..e6fd99d2f238 100644
--- a/packages/website/src/components/ast/ASTViewer.module.css
+++ b/packages/website/src/components/ast/ASTViewer.module.css
@@ -14,7 +14,7 @@
   box-sizing: border-box;
   margin: 0;
   padding-left: 1.5rem;
-  max-width: max-content;
+  width: max-content;
 }
 
 .selected {
@@ -24,7 +24,7 @@
 .nonExpand,
 .expand {
   border-left: 0.1rem dashed var(--ifm-color-emphasis-200);
-  max-width: max-content;
+  width: max-content;
 }
 
 .expand.open::before {

From 923f875591f29e26d85f22080f0e3fc9f3297110 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Thu, 23 Feb 2023 08:22:57 +0100
Subject: [PATCH 3/3] fix(website): revert some changes

---
 .../website/src/components/EditorTabs.tsx     | 27 ++++++++++---------
 .../src/components/Playground.module.css      |  2 --
 .../website/src/components/Playground.tsx     |  9 +------
 3 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/packages/website/src/components/EditorTabs.tsx b/packages/website/src/components/EditorTabs.tsx
index 0d961fb81d8d..6edbee224220 100644
--- a/packages/website/src/components/EditorTabs.tsx
+++ b/packages/website/src/components/EditorTabs.tsx
@@ -2,20 +2,21 @@ import EditIcon from '@site/src/icons/edit.svg';
 import React from 'react';
 
 import styles from './Playground.module.css';
+import type { TabType } from './types';
 
-export interface FileTabsProps<T> {
-  readonly tabs: { value: T; label: string }[];
-  readonly activeTab: T;
-  readonly change: (tab: T) => void;
-  readonly showModal?: () => void;
+export interface FileTabsProps {
+  readonly tabs: TabType[];
+  readonly activeTab: TabType;
+  readonly change: (tab: TabType) => void;
+  readonly showModal: () => void;
 }
 
-export default function EditorTabs<T>({
+export default function EditorTabs({
   tabs,
   activeTab,
   change,
   showModal,
-}: FileTabsProps<T>): JSX.Element {
+}: FileTabsProps): JSX.Element {
   return (
     <div className={styles.tabContainer}>
       <div role="tablist">
@@ -24,17 +25,17 @@ export default function EditorTabs<T>({
             <button
               role="tab"
               className={styles.tabStyle}
-              key={item.label}
-              aria-selected={activeTab === item.value}
-              disabled={activeTab === item.value}
-              onClick={(): void => change(item.value)}
+              key={item}
+              aria-selected={activeTab === item}
+              disabled={activeTab === item}
+              onClick={(): void => change(item)}
             >
-              {item.label}
+              {item}
             </button>
           );
         })}
       </div>
-      {activeTab !== 'code' && showModal && (
+      {activeTab !== 'code' && (
         <button className={styles.tabStyle} onClick={showModal}>
           Visual Editor
           <EditIcon width={12} height={12} />
diff --git a/packages/website/src/components/Playground.module.css b/packages/website/src/components/Playground.module.css
index 31fc6a20988c..9f14c0eee08f 100644
--- a/packages/website/src/components/Playground.module.css
+++ b/packages/website/src/components/Playground.module.css
@@ -43,7 +43,6 @@
   height: calc(100% - var(--ifm-navbar-height));
   top: var(--ifm-navbar-height);
   z-index: calc(var(--ifm-z-index-fixed) - 1);
-  background: var(--playground-main-color);
 }
 
 .tabContainer {
@@ -55,7 +54,6 @@
 
 .tabCode {
   height: calc(100% - 32px);
-  background: var(--code-editor-bg);
 }
 
 .tabStyle {
diff --git a/packages/website/src/components/Playground.tsx b/packages/website/src/components/Playground.tsx
index e48c73c58b6f..a972a32b31a1 100644
--- a/packages/website/src/components/Playground.tsx
+++ b/packages/website/src/components/Playground.tsx
@@ -48,13 +48,6 @@ function rangeReducer<T extends SelectedRange | null>(
   }
   return prevState;
 }
-
-const fileTabs: { value: TabType; label: string }[] = [
-  { value: 'code', label: 'code' },
-  { value: 'tsconfig', label: 'tsconfig.json' },
-  { value: 'eslintrc', label: '.eslintrc.js' },
-];
-
 function Playground(): JSX.Element {
   const [state, setState] = useHashState({
     jsx: false,
@@ -140,7 +133,7 @@ function Playground(): JSX.Element {
             <div className={clsx(styles.sourceCode)}>
               {isLoading && <Loader />}
               <EditorTabs
-                tabs={fileTabs}
+                tabs={['code', 'tsconfig', 'eslintrc']}
                 activeTab={activeTab}
                 change={setTab}
                 showModal={(): void => setShowModal(activeTab)}