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..9f14c0eee08f 100644
--- a/packages/website/src/components/Playground.module.css
+++ b/packages/website/src/components/Playground.module.css
@@ -53,7 +53,7 @@
 }
 
 .tabCode {
-  height: calc(100%);
+  height: calc(100% - 32px);
 }
 
 .tabStyle {
diff --git a/packages/website/src/components/Playground.tsx b/packages/website/src/components/Playground.tsx
index eabdb63f6721..a972a32b31a1 100644
--- a/packages/website/src/components/Playground.tsx
+++ b/packages/website/src/components/Playground.tsx
@@ -48,7 +48,6 @@ function rangeReducer<T extends SelectedRange | null>(
   }
   return prevState;
 }
-
 function Playground(): JSX.Element {
   const [state, setState] = useHashState({
     jsx: false,
@@ -129,6 +128,7 @@ function Playground(): JSX.Element {
             split="vertical"
             minSize="10%"
             defaultSize="50%"
+            pane2Style={{ overflow: 'hidden' }}
           >
             <div className={clsx(styles.sourceCode)}>
               {isLoading && <Loader />}
diff --git a/packages/website/src/components/ast/ASTViewer.module.css b/packages/website/src/components/ast/ASTViewer.module.css
index a0ae49a096c2..e6fd99d2f238 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;
+  width: max-content;
 }
 
 .selected {
@@ -24,6 +24,7 @@
 .nonExpand,
 .expand {
   border-left: 0.1rem dashed var(--ifm-color-emphasis-200);
+  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;