From 8fe817e61e5fe50020ed9379ce9e1c5a2cf476a9 Mon Sep 17 00:00:00 2001
From: Shanmughapriyan S <priyanshan03@gmail.com>
Date: Mon, 17 Oct 2022 02:56:39 +0530
Subject: [PATCH] [Beta] fix: gutter overlap with sandpack code on mobile
 (#5170)

* fix: gutter overlap

* chore: move horizontal scrollbar to code-content
---
 beta/src/styles/sandpack.css | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/beta/src/styles/sandpack.css b/beta/src/styles/sandpack.css
index 807d2098..d78ab5a6 100644
--- a/beta/src/styles/sandpack.css
+++ b/beta/src/styles/sandpack.css
@@ -211,8 +211,14 @@ html.dark .sp-wrapper {
   -webkit-font-smoothing: auto; /* Improve the legibility */
 }
 
+.sandpack .sp-code-editor .cm-content {
+  overflow-x: auto;
+  padding-bottom: 18px;
+}
+
 .sandpack--playground .sp-code-editor .cm-line {
   padding: 0 var(--sp-space-3);
+  width: max-content;
 }
 
 .sandpack--playground .sp-code-editor .cm-lineNumbers {
@@ -250,8 +256,9 @@ html.dark .sp-wrapper {
 }
 
 .sp-code-editor .sp-cm .cm-scroller {
-  overflow: auto;
-  padding: 18px 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding-top: 18px;
 }
 
 /**