diff --git a/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css b/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css
index 01ad0cb681d..09ac247588e 100644
--- a/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css
+++ b/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css
@@ -166,28 +166,37 @@
   background-color: rgb(240, 242, 245);
   font-family: Menlo, Consolas, Monaco, monospace;
   display: block;
-  padding: 8px 8px 8px 52px;
   line-height: 1.53;
   font-size: 13px;
+  padding-top: 8px;
   margin: 0;
   margin-top: 8px;
   margin-bottom: 8px;
   overflow-x: auto;
   position: relative;
   tab-size: 2;
+  white-space: pre;
+  max-width: 100%;
+  box-sizing: border-box;
 }
 .PlaygroundEditorTheme__code:before {
   content: attr(data-gutter);
-  position: absolute;
+  position: sticky;
   background-color: #eee;
   left: 0;
+  float: left;
   top: 0;
+  z-index: 3;
+  min-height: 100%;
   border-right: 1px solid #ccc;
   padding: 8px;
   color: #777;
   white-space: pre-wrap;
   text-align: right;
   min-width: 25px;
+  margin-right: 10px;
+  margin-top: -8px;
+  padding: 8px;
 }
 .PlaygroundEditorTheme__tableScrollableWrapper {
   overflow-x: auto;